HTML addEventListener和attachEvent的區別詳解

語法

element.addEventListener(event,function,useCapture)

引數值

引數	描述
event	必須。字串，指定事件名。 注意: 不要使用 "on" 字首。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以檢視我們完整的 HTML DOM Event 物件參考手冊。
function	必須。指定要事件觸發時執行的函式。  當事件物件會作為第一個引數傳入函式。 事件物件的型別取決於特定的事件。例如， "click" 事件屬於 MouseEvent(滑鼠事件) 物件。
useCapture	可選。布林值，指定事件是否在捕獲或冒泡階段執行。 可能值: true - 事件控制程式碼在捕獲階段執行 false- false- 預設。事件控制程式碼在冒泡階段執行

例項

您可以通過函式名來引用外部函式。

該例項演示了在使用者點選a <button> 元素時如何執行函式:

1. <span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myBtn").addEventListener("click", myFunction);

2. function myFunction() {

3. document.getElementById("demo").innerHTML = "Hello World";

4. }</span></span>

您可以在文件中新增許多事件，新增的事件不會覆蓋已存在的事件。

該例項演示瞭如何在<button>元素中新增兩個點選事件：

1. <span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myBtn").addEventListener("click", myFunction);

2. document.getElementById("myBtn").addEventListener("click", someOtherFunction);</span></span>

您可以在同一個元素中新增不同型別的事件。

該例項演示瞭如何在同一個 <button> 元素中新增多個事件：

1. <span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myBtn").addEventListener("mouseover", myFunction);

2. document.getElementById("myBtn").addEventListener("click", someOtherFunction);

3. document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);</span></span>

修改 <button> 元素的背景：

1. <span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myBtn").addEventListener("click", function(){

2. this.style.backgroundColor = "red";

3. });</span></span>

使用 removeEventListener() 方法移除由 addEventListener() 方法新增的事件控制程式碼:

// 新增 <div> 事件控制程式碼 

<span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myDIV").addEventListener("mousemove", myFunction);</span></span>

// 移除 <div> 事件控制程式碼 

<span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myDIV").removeEventListener("mousemove", myFunction);</span></span>

 

如果瀏覽器不支援 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。

以下例項演示了跨瀏覽器的解決方法：

1. <span style="font-family:SimSun;"><span style="font-size:18px;">var x = document.getElementById("myBtn");

2. if (x.addEventListener) { //所有主流瀏覽器，除了 IE 8 及更早 IE版本

3. x.addEventListener("click", myFunction);

4. } else if (x.attachEvent) { // IE 8 及更早 IE 版本

5. x.attachEvent("onclick", myFunction);

6. }</span></span>

 addEventListener() 方和attachEvent()區別

addEventListener(event,function,capture/bubble);

引數event如上表所示, 

function是要執行的函式, 

capture與bubble分別是W3C制定得兩種時間模式,

簡單來說capture就是從document的開始讀到最後一行, 再執行事件, 

而bubble則是先尋找指定的位置再執行事件.

capture/bubble的引數是布林值, True表示用capture, False則是bubble.

 

Windows Internet Explorer( IE )也有制定一種EventHandler, 是 attachEvent(), 格式如下:

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

比較特別的是attachEvent不需要指定capture/bubble的引數, 因為在windows IE環境下都是使用Bubble的模式.

Mozilla中： 

addEventListener的使用方式： 

target.addEventListener(type, listener, useCapture); 

target： 文件節點、document、window 或 XMLHttpRequest。 
type： 字串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。 
listener ：實現了 EventListener 介面或者是 JavaScript 中的函式。 
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("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.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);}); 

移除設定的事件, 格式分別如下: 
W3C格式: 
removeEventListener(event,function,capture/bubble); 
Windows IE的格式如下: 
detachEvent(event,function); 
事件觸發時，會將一個 Event 物件傳遞給事件處理程式，比如： 
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
適應的瀏覽器版本不同，同時在使用的過程中要注意 
（1）attachEvent方法 按鈕onclick IE中使用 
（2）addEventListener方法 按鈕click fox中使用 
兩者使用的原理：可對執行的優先順序不一樣，下面例項講解如下： 
（1）attachEvent方法，為某一事件附加其它的處理事件。（不支援Mozilla系列） 
（2）addEventListener方法 用於 Mozilla系列 
舉例:

1. <span style="font-family:SimSun;">document.getElementById("btn").onclick = method1;

2. document.getElementById("btn").onclick = method2;

3. document.getElementById("btn").onclick = method3;</span>

如果這樣寫,那麼將會只有medhot3被執行 
寫成這樣： 

1. <span style="font-family:SimSun;">var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);

2. btn1Obj.attachEvent("onclick",method1);

3. btn1Obj.attachEvent("onclick",method2);

4. btn1Obj.attachEvent("onclick",method3);</span>

執行順序為method3->method2->method1 
如果是Mozilla系列，並不支援attachEvent該方法，需要用到

1. <span style="font-family:SimSun;">addEventListener var btn1Obj = document.getElementById("btn1");

2. //element.addEventListener(type,listener,useCapture);

3. btn1Obj.addEventListener("click",method1,false);

4. btn1Obj.addEventListener("click",method2,false);

5. btn1Obj.addEventListener("click",method3,false);</span>

執行順序為method1->method2->method3

例項：(要注意的是div必須放到js前面才行) 

1. <span style="font-family:SimSun;"><html>

2. <head>

3. </head>

4. <body>

5. <div id="name1" style="border:1px solid red;padding:10px 10px 10px 10px;" style="border:1px solid red;padding:10px 10px 10px 10px;">

6. <div id="name2" style="border:1px solid green;padding:10px 10px 10px 10px;" style="border:1px solid green;padding:10px 10px 10px 10px;">點選</div>

7. </div>

8. <div id="info"></div>

9. <script type="text/javascript"><!--

10. var name1=document.getElementById('name1'); //要注意

11. var name2=document.getElementById('name2'); //要注意

12. var info=document.getElementById('info');

13. if(name1.attachEvent){ //對於attachEvent前面的target我們一定要保證不為空

14. name1.attachEvent('onclick',function () { info.innerHTML += "紅色" + "<br>"; });

15. name2.attachEvent('onclick',function () { info.innerHTML += "綠色" + "<br>"; });

16. }else{

17. name1.addEventListener('click',function () { info.innerHTML += "紅色" + "<br>"; },false);

18. name2.addEventListener('click',function () { info.innerHTML += "綠色" + "<br>"; },false);

19. }

20. // --></script>

21. </body>

22. </html> </span>

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

參考：http://www.runoob.com/jsref/met-element-addeventlistener.html

           http://www.jb51.net/article/18220.htm