addEventLister和attachEvent的作用,以及兩者的區別
阿新 • • 發佈:2018-12-01
在事件監聽方面,IE提供了attachEvent和detachEvent兩個介面,firefox提供了addEventLister和removeEventLister,最簡單的相容處理就是封裝這兩套介面。
需要特別注意,在firefox下事件處理函式中的this指向被監聽的元素本身,在IE下不一樣,可使用回撥函式call,讓當前上下文指向監聽元素。
function addEvent(elem,eventName,handler){ if(elem.attachEvent){ elem.attachEvent("on" + eventName,function(){ handler.call(elem) }) }else if(elem.addEventListener){ elem.addEventListener(eventName,handler,false); } } function removeEvent(elem,eventName,handler){ if(elem.detachEvent){ elem.detachEvent("on" + eventName,function(){ handler.call(elem) }) }else if(elem.removeEventLister){ elem.removeEventLister(eventName,handler,false); } }
1、支援的瀏覽器
addEventLister在DOM2的瀏覽器中使用,如Firefor、Chrome等。
attachEvent為IE所用。
2、處理程式執行階段
addEventLister的第三個引數為true時,在捕獲階段執行;為false時,在冒泡階段執行。
attachEvent均在冒泡階段執行。
3、作用域
addEventLister的作用域為元素作用域,this為element引用。
attachEvent的作用域為全域性作用域,this為window引用。
4、事件處理程式執行順序
addEventLister:執行順序與新增順序一致。
attachEvent:執行順序與新增順序相反。