attachEvent和addEventListener在前端開發(fā)過程中經(jīng)常性的使用，他們都可以用來綁定腳本事件，取代在html中寫

obj.οnclick=method。

相同點(diǎn)：

　　它們都是DOM對象的方法，可以實(shí)現(xiàn)一種事件綁定多個事件處理函數(shù)。

obj = document.getElementById("testdiv"); obj.onclick=function(){alert('1');}; obj.onclick=function(){alert('2');}; obj.onclick=function(){alert('3');}; // 當(dāng)使用上邊三句話進(jìn)行事件綁定的時(shí)候，很明顯當(dāng)點(diǎn)擊ID為testdiv對象時(shí)，只能執(zhí)行
//最后一句腳本。因?yàn)閛nclick作為一個事件處理對象，只能賦一個值，后面的賦值自動覆
//蓋前面的

使用attachEvent和addEventListener時(shí)則可以實(shí)現(xiàn)多個事件處理函數(shù)的調(diào)用

obj = document.getElementById("testdiv"); obj.attachEvent('onclick',function(){{alert('1');}); obj.attachEvent('onclick',function(){{alert('2');}); obj.attachEvent('onclick',function(){{alert('3');});//點(diǎn)擊時(shí)，三個方法都會執(zhí)行 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);//點(diǎn)擊時(shí)，三個方法都會執(zhí)行

不同點(diǎn)：

　　1.attachEvent是IE9之前特有的方法，它不遵循W3C標(biāo)準(zhǔn)，而其他的主流瀏覽器如FF等遵循W3C標(biāo)準(zhǔn)的瀏覽器都使用addEventListener，所以實(shí)際開發(fā)中需分開處理。

　　2.多次綁定后執(zhí)行的順序是不一樣的，attachEvent在ie9之前的版本是后綁定先執(zhí)行，ie9以及以后的版本是先綁定先執(zhí)行，且兩者都支持，addEventListener是先綁定先執(zhí)行。

obj = document.getElementById("testdiv"); obj.attachEvent('onclick',function(){{alert('1');}); obj.attachEvent('onclick',function(){{alert('2');}); obj.attachEvent('onclick',function(){{alert('3');}); //執(zhí)行順序是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); //點(diǎn)擊obj對象時(shí),執(zhí)行順序?yàn)閍lert('1'),alert('2'),alert('3');

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

　　4.attachEvent僅需要傳遞兩個參數(shù)，而addEventListener需要傳遞三個參數(shù)，這里牽扯到“事件流”的概念。偵聽器在偵聽時(shí)有三個階段：捕獲階段、目標(biāo)階段和冒泡階段。順序?yàn)?#xff1a;捕獲階段（根節(jié)點(diǎn)到子節(jié)點(diǎn)檢查是否調(diào)用了監(jiān)聽函數(shù)）→目 標(biāo)階段（目標(biāo)本身）→冒泡階段（目標(biāo)本身到根節(jié)點(diǎn)）。此處的參數(shù)確定偵聽器是運(yùn)行于捕獲階段、目標(biāo)階段還是冒泡階段。 如果將 useCapture 設(shè)置為 true，則偵聽器只在捕獲階段處理事件，而不在目標(biāo)或冒泡階段處理事件。 如果useCapture 為 false，則偵聽器只在目標(biāo)或冒泡階段處理事件。 要在所有三個階段都偵聽事件，請調(diào)用兩次 addEventListener，一次將 useCapture 設(shè)置為 true，第二次再將useCapture 設(shè)置為 false。?

為了解決瀏覽器的兼容性可以封裝成addEvent方法：

function addEvent(elm, evType, fn, useCapture) {if (elm.addEventListener) {// W3C標(biāo)準(zhǔn)elm.addEventListener(evType, fn, useCapture);return true;}else if (elm.attachEvent) {//IEvar r = elm.attachEvent(‘on‘ evType, fn);//IE5 return r;}else {elm['on' evType] = fn;//DOM事件} } function addEvent(element, type, handler) {//為每一個事件處理函數(shù)分派一個唯一的IDif (!handler.$$guid) handler.$$guid = addEvent.guid ;//為元素的事件類型創(chuàng)建一個哈希表if (!element.events) element.events = {};//為每一個"元素/事件"對創(chuàng)建一個事件處理程序的哈希表var handlers = element.events[type];if (!handlers) {handlers = element.events[type] = {};//存儲存在的事件處理函數(shù)(如果有)if (element["on" type]) {handlers[0] = element["on" type];}}//將事件處理函數(shù)存入哈希表handlers[handler.$$guid] = handler;//指派一個全局的事件處理函數(shù)來做所有的工作element["on" type] = handleEvent;};//用來創(chuàng)建唯一的ID的計(jì)數(shù)器addEvent.guid = 1;function removeEvent(element, type, handler) {//從哈希表中刪除事件處理函數(shù)if (element.events && element.events[type]) {delete element.events[type][handler.$$guid];}};function handleEvent(event) {var returnValue = true;//抓獲事件對象(IE使用全局事件對象)event = event || fixEvent(window.event);//取得事件處理函數(shù)的哈希表的引用var handlers = this.events[event.type];//執(zhí)行每一個處理函數(shù)for (var i in handlers) {this.$$handleEvent = handlers[i];if (this.$$handleEvent(event) === false) {returnValue = false;}}return returnValue;};//為IE的事件對象添加一些“缺失的”函數(shù)function fixEvent(event) {//添加標(biāo)準(zhǔn)的W3C方法event.preventDefault = fixEvent.preventDefault;event.stopPropagation = fixEvent.stopPropagation;return event;};fixEvent.preventDefault = function () {this.returnValue = false;};fixEvent.stopPropagation = function () {this.cancelBubble = true;}; var addEvent = (function () {if (document.addEventListener) {return function (el, type, fn) {if (el.length) {for (var i = 0; i && el.length; i ) {addEvent(el[i], type, fn);}} else {el.addEventListener(type, fn, false);}};} else {return function (el, type, fn) {if (el.length) {for (var i = 0; i && el.length; i ) {addEvent(el[i], type, fn);}} else {el.attachEvent('on' type, function () {return fn.call(el, window.event);});}};}})();

以上內(nèi)容是在學(xué)習(xí)了該博文后經(jīng)過修改轉(zhuǎn)載的https://www.cnblogs.com/dacuotecuo/p/3510823.html

版權(quán)說明：本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但必須保留此段聲明，且在文章頁面中給出原文連接。

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的attachEvent和addEventListener的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。