Mozilla中：
addEventListener的使用方式：
target.addEventListener(type, listener,
useCapture);
target： 文檔節點、document、window 或
XMLHttpRequest。
type：
字符串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：實現了 EventListener 接口或者是 JavaScript
中的函數。
useCapture ：是否使用捕捉，一般用 false
。例如：document.getElementByIdx_x("testText").addEventListener("keydown",
function (event) { alert(event.keyCode); },
false);
IE中：
target.attachEvent(type,
listener);
target： 文檔節點、document、window 或
XMLHttpRequest。
type：
字符串，事件名稱，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：實現了 EventListener 接口或者是 JavaScript 中的函數。
例如：document.getElementByIdx_x("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
W3C 及 IE 同時支持移除指定的事件, 用途是移除設定的事件,
格式分別如下:
W3C格式:
removeEventListener(event,function,capture/bubble);
Windows IE的格式如下:
detachEvent(event,function);
target.addEventListener(type, listener,
useCapture);
target 文檔節點、document、window 或
XMLHttpRequest。
type
字符串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener 實現了 EventListener 接口或者是 JavaScript
中的函數。
useCapture 是否使用捕捉，看了後面的事件流一節後就明白了，一般用
false
事件觸發時，會將一個 Event 對象傳遞給事件處理程序，比如：
document.getElementByIdx_x("testText").addEventListener("keydown",
function (event) { alert(event.keyCode); },
false);
適應的瀏覽器版本不同，同時在使用的過程中要注意
attachEvent方法 按鈕onclick IE中使用
addEventListener方法 按鈕click
fox中使用
兩者使用的原理：可對執行的優先級不一樣，下面實例講解如下：
attachEvent方法，爲某一事件附加其它的處理事件。（不支持Mozilla系列）
addEventListener方法 用於 Mozilla系列
舉例: document.getElementByIdx_x("btn").onclick =
method1;
document.getElementByIdx_x("btn").onclick =
method2;
document.getElementByIdx_x("btn").onclick =
method3;如果這樣寫,那麼將會只有medhot3被執行
寫成這樣：
var btn1Obj = document.getElementByIdx_x("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);執行順序爲method3->method2->method1
如果是Mozilla系列，並不支持該方法，需要用到addEventListener var btn1Obj =
document.getElementByIdx_x("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);執行順序爲method1->method2->method3
實例：(要注意的是div必須放到js前面才行)
複製代碼代碼如下:
<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;">點擊</div>
</div>
<div
id="info"></div>
<script
type="text/javascript"><!--
var name1=document.getElementByIdx_x('name1');
//要注意
var name2=document.getElementByIdx_x('name2');
//要注意
var
info=document.getElementByIdx_x('info');
if(name1.attachEvent){
//對於attachEvent前面的target我們一定要保證不爲空
name1.attachEvent('onclick',function () { info.innerHTML += "紅色" +
"<br>";
});
name2.attachEvent('onclick',function () { info.innerHTML += "綠色" +
"<br>";
});
}else{
name1.addEventListener('click',function () { info.innerHTML += "紅色"
+ "<br>";
},false);
name2.addEventListener('click',function () { info.innerHTML += "綠色"
+ "<br>";
},false);
}
//
--></script>
</body>
</html>
從W3C的發展時間軸來看, DOM(Document Object Model)的模型可以分爲兩種, DOM 0 及 DOM 2. 從數字來看就可以知道DOM 0 當然是比較舊的協議, 我們可以從以下的表格來看:
DOM1 協定:
|
|
|
|
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 的進化:
|
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()這個函數來觀察到:
addEventListener(event,function,capture/bubble);
參數event如上表所示, function是要執行的函數,
capture與bubble分別是W3C制定得兩種時間模式,簡單來說capture就是從document的開始讀到最後一行,
再執行事件, 而bubble則是先尋找指定的位置再執行事件.
capture/bubble的參數是布爾值, True表示用capture, False則是bubble.Windows
Internet Explorer也有制定一種EventHandler, 是 attachEvent(), 格式如下:
window.attachEvent(”submit”,myFunction());
比較特別的是attachEvent不需要指定capture/bubble的參數, 因爲在windows IE環境下都是使用Bubble的模式.這裏用圖像的Rollover例子來表現事件的用法:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML
4.01//EN”
“http://www.w3.org/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_r(”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這個事件模型, 如果不支持就使用attachEvent.
W3C 及 IE 同時支持移除指定的事件, 用途是移除設定的事件, 格式分別如下:
W3C格式:
removeEventListener(event,function,capture/bubble);
Windows IE的格式如下:
detachEvent(event,function);
