attachEvent和addEventListener

attachEvent和addEventListener在前端開發過程中經常性的使用，他們都可以用來綁定腳本事件，取代在html中寫obj.οnclick=method。

相同點：

它們都是dom對象的方法，可以實作一種事件綁定多個事件處理函數。

obj = document.getElementById("testdiv");
	obj.onclick=function(){alert('1');};
	obj.onclick=function(){alert('2');};
	obj.onclick=function(){alert('3');};
           

// 當使用上邊三句話進行事件綁定的時候，很明顯當點選ID為testdiv對象時，隻能執行

//最後一句腳本。因為onclick作為一個事件處理對象，隻能賦一個值，後面的指派自動覆

//蓋前面的

obj = document.getElementById("testdiv");
	obj.attachEvent('onclick',function(){{alert('1');});
	obj.attachEvent('onclick',function(){{alert('2');});
	obj.attachEvent('onclick',function(){{alert('3');});//點選時，三個方法都會執行


	obj = document.getElementById("testdiv");
	obj.addEventListener('click',function(){{alert('1');},false);
	obj.addEventListener('click',function(){{alert(2');},false);
	obj.addEventListener('click',function(){{alert('3');},false);//點選時，三個方法都會執行
	//使用attachEvent和addEventListener時則可以實作多個事件處理函數的調用
           

不同點：

1.attachEvent是IE有的方法，它不遵循W3C标準，而其他的主流浏覽器如FF等遵循W3C标準的浏覽器都使用 addEventListener，是以實際開發中需分開處理。

2.多次綁定後執行的順序是不一樣的，attachEvent是後綁定先執行，addEventListener是先綁定先執行。

obj = document.getElementById("testdiv");
	obj.attachEvent('onclick',function(){{alert('1');});
	obj.attachEvent('onclick',function(){{alert('2');});
	obj.attachEvent('onclick',function(){{alert('3');});
	//執行順序是alert(3),alert(2),alert(1);



obj = document.getElementById("testdiv");
	obj.addEventListener('click',function(){{alert('1');},false);
	obj.addEventListener('click',function(){{alert('2');},false);
	obj.addEventListener('click',function(){{alert('3');},false);
	//點選obj對象時,執行順序為alert('1'),alert('2'),alert('3');
           

3.綁定時間時，attachEvent必須帶on，如onclick，onmouseover等，而addEventListener不能帶on，如click，mouseover。這個差別在以上代碼中可見。

4.attachEvent僅需要傳遞兩個參數，而addEventListener需要傳遞三個參數，這裡牽扯到“事件流”的概念。偵聽器在偵聽時有三個階段：捕獲階段、目标階段和冒泡階段。順序為：捕獲階段（根節點到子節點檢查是否調用了監聽函數）→目 标階段（目标本身）→冒泡階段（目标本身到根節點）。此處的參數确定偵聽器是運作于捕獲階段、目标階段還是冒泡階段。 如果将 useCapture 設定為 true，則偵聽器隻在捕獲階段處理事件，而不在目标或冒泡階段處理事件。 如果useCapture 為 false，則偵聽器隻在目标或冒泡階段處理事件。 要在所有三個階段都偵聽事件，請調用兩次 addEventListener，一次将 useCapture 設定為 true，第二次再将useCapture 設定為 false。

為了解決浏覽器的相容性可以寫如下代碼：

function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener)  {
        // W3C标準
        elm.addEventListener(evType, fn, useCapture);
        return true;
    } else if (elm.attachEvent) {
        //IE
        var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+
        return r;
    } else  {
        elm['on' + evType] = fn;//DOM事件
    }
}
           

轉載：https://www.cnblogs.com/dacuotecuo/p/3510823.html