Javascript 的addEventListener()及attachEvent()區(qū)別分析

歪SIR 2011-07-25

展開(kāi)全文

大家都知道事件的用法就是當(dāng)某個(gè)事件(狀況)被觸發(fā)了之后就會(huì)去執(zhí)行某個(gè)Function, 尤其是Javascript, 在當(dāng)紅AJAX的催化下, 了解Javascript的Event用法更加重要, 在這里就大概介紹一下avascript的Event用法.
Mozilla中：

addEventListener的使用方式：

target.addEventListener(type, listener, useCapture);

target：文檔節(jié)點(diǎn)、document、window 或 XMLHttpRequest。
type：字符串，事件名稱(chēng)，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：實(shí)現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中：

target.attachEvent(type, listener);
target：文檔節(jié)點(diǎn)、document、window 或 XMLHttpRequest。
type：字符串，事件名稱(chēng)，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：實(shí)現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

W3C 及 IE 同時(shí)支持移除指定的事件, 用途是移除設(shè)定的事件, 格式分別如下:

W3C格式:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

target.addEventListener(type, listener, useCapture);
target 文檔節(jié)點(diǎn)、document、window 或 XMLHttpRequest。
type 字符串，事件名稱(chēng)，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener 實(shí)現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。
useCapture 是否使用捕捉，看了后面的事件流一節(jié)后就明白了，一般用 false
事件觸發(fā)時(shí)，會(huì)將一個(gè) Event 對(duì)象傳遞給事件處理程序，比如：
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
適應(yīng)的瀏覽器版本不同，同時(shí)在使用的過(guò)程中要注意
attachEvent方法按鈕onclick IE中使用
addEventListener方法按鈕click fox中使用
兩者使用的原理：可對(duì)執(zhí)行的優(yōu)先級(jí)不一樣，下面實(shí)例講解如下：
attachEvent方法，為某一事件附加其它的處理事件。（不支持Mozilla系列）
addEventListener方法用于 Mozilla系列
舉例: document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;如果這樣寫(xiě),那么將會(huì)只有medhot3被執(zhí)行
寫(xiě)成這樣：
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);執(zhí)行順序?yàn)閙ethod3->method2->method1
如果是Mozilla系列，并不支持該方法，需要用到addEventListener var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);執(zhí)行順序?yàn)閙ethod1->method2->method3
實(shí)例：(要注意的是div必須放到j(luò)s前面才行)
復(fù)制代碼代碼如下:

<html>
<head>
</head>
<body>
<div id="name1" style="border:1px solid red;padding:10px 10px 10px 10px;" style="border:1px solid red;padding:10px 10px 10px 10px;">
<div id="name2" style="border:1px solid green;padding:10px 10px 10px 10px;" style="border:1px solid green;padding:10px 10px 10px 10px;">點(diǎn)擊</div>
</div>
<div id="info"></div>
<script type="text/javascript"></script>
</body>
</html>

從W3C的發(fā)展時(shí)間軸來(lái)看, DOM(Document Object Model)的模型可以分為兩種, DOM 0 及 DOM 2. 從數(shù)字來(lái)看就可以知道DOM 0 當(dāng)然是比較舊的協(xié)議, 我們可以從以下的表格來(lái)看:

DOM1 協(xié)定:

Event Name


Description

onblur()


The element has lost focus (that is, it is not selected by the user).

onchange0


The element has either changed (such as by typing into a text field) or the element has lost focus.

onclick0


The mouse has been clicked on an element.

ondblclick()


The mouse has been double-clicked on an element.

onfocus()


The element has gotten focus.

onkeydown()


A keyboard key has been pressed down (as opposed to released) while the element has focus.

onkeypress()


A keyboard key has been pressed while the element has focus.

onkeyup()


A keyboard key has been released while the element has focus.

onload()


The element has loaded (document, frameset, or image).

onmousedown()


A mouse button has been pressed.

onmousemove()


The mouse has been moved.

onmouseout()


The mouse has been moved off of or away from an element.

onmouseover()


The mouse has moved over an element.

onmouseup()


A mouse button has been released.

onreset()


The form element has been reset, such as when a form reset button is pressed.

onresize()


The window's size has been changed.

onselect()


The text of a form element has been selected.

onsubmit()


The form has been submitted.

onunload()


The document or frameset has been unloaded.

DOM2 的進(jìn)化:

DOM 0 Event


DOM 2 Event

onblur()


blur

onfocus()


focus

onchange()


change

onmouseover()


mouseover

onmouseout()


mouseout

onmousemove()


mousemove

onmousedown()


mousedown

onmouseup()


mouseup

onclick()


click

ondblclick()


dblclick

onkeydown()


keydown

onkeyup()


keyup

onkeypress()


keypress

onsubmit()


submit

onload()


load

onunload()


unload

新的DOM2 用法可以addEventListener()這個(gè)函數(shù)來(lái)觀察到:

addEventListener(event,function,capture/bubble);

參數(shù)event如上表所示, function是要執(zhí)行的函數(shù), capture與bubble分別是W3C制定得兩種時(shí)間模式,簡(jiǎn)單來(lái)說(shuō)capture就是從document的開(kāi)始讀到最后一行, 再執(zhí)行事件, 而bubble則是先尋找指定的位置再執(zhí)行事件.
capture/bubble的參數(shù)是布爾值, True表示用capture, False則是bubble.Windows Internet Explorer也有制定一種EventHandler, 是 attachEvent(), 格式如下:

window.attachEvent(”submit”,myFunction());

比較特別的是attachEvent不需要指定capture/bubble的參數(shù), 因?yàn)樵趙indows IE環(huán)境下都是使用Bubble的模式.這里用圖像的Rollover例子來(lái)表現(xiàn)事件的用法:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www./TR/html4/strict.dtd“>
<html>
<head>
<title>Rollover</title>
<script type=”text/javascript”>function moveOver(imgObj) {
if (typeof window.addEventListener != “undefined”) {
imgObj.addEventListener(”mouseover”,function(){imgObj.src = imgObj.id +
“_over.png”;}, false);
imgObj.addEventListener(”mouseout”, function(){imgObj.src = imgObj.id +
“_default.png”;}, false);
} else {
imgObj.attachEvent(”onmouseover”,function(){imgObj.src = imgObj.id +
“_over.png”;});
imgObj.attachEvent(”onmouseout”, function(){imgObj.src = imgObj.id +
“_default.png”;});
}
}

function rollover() {
var images = document.getElementsByTagName(”img”);
var roll = new RegExp (”rollover”);
var preload = [];
for (var i = 0; i < images.length; i++) {
if (images[i].id.match(roll)) {
preload[i] = new Image();
preload[i].src = images[i].id + “_over.png”;

moveOver(images[i]);
}
}
}
if (typeof window.addEventListener != “undefined”) {
window.addEventListener(”load”,rollover,false);
} else {
window.attachEvent(”onload”,rollover)
}
</script>
</head>
<body>
<p><img id=”rollover_home” name=”img_home” src=”rollover_home_default.png”
alt=”Home”></p>
<p><img id=”rollover_about” name=”img_about” src=”rollover_about_default.png”
alt=”About”></p>
<p><img id=”rollover_blog” name=”img_blog” src=”rollover_blog_default.png”
alt=”Blog”></p>
<p><img id=”logo” name=”img_logo” src=”logo.png” alt=”Braingia Logo”></p>
</body>
</html>

上述的 typeof window.addEventListener != “undefined” 程序代碼可以判斷使用者的瀏覽器是否支持AddEventListener這個(gè)事件模型, 如果不支持就使用attachEvent.

W3C 及 IE 同時(shí)支持移除指定的事件, 用途是移除設(shè)定的事件, 格式分別如下:

W3C格式:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

數(shù)據(jù)參考: Chapter 14 - Browsers and JavaScript, JavaScript Step by Step, by Steve Suehring
詳細(xì)出處參考：http://www.jb51.net/article/18220.htm

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶(hù)發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：歪SIR > 《Javascript》

舉報(bào)/認(rèn)領(lǐng)