回到頂部

js 添加事件 attachEvent 和 addEventListener 的用法

時間:5年前   作者:燒雞   瀏覽:151   [網絡轉載] 原文鏈接

標簽: JavaScript  

一般我們在JS中添加事件,是這樣子的

obj.onclick=method

這種綁定事件的方式,兼容主流瀏覽器,但如果一個元素上添加多次同一事件呢?

obj.onclick=method1;
obj.onclick=method2;
obj.onclick=method3;

如果這樣寫,那么只有最后綁定的事件,這里是method3會被執行,這個時候我們就不能用onclick這樣的寫法了,主角改登場了,在IE中我們可以使用attachEvent方法

//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

使用格式是前面是事件類型,注意的是需要加on,比如onclick,onsubmit,onchange,執行順序是

method3->method2->method1

可惜這個微軟的私人方法,火狐和其他瀏覽器都不支持,幸運的是他們都支持W3C標準的addEventListener方法

//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);

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

做前端開發工程師,最悲劇的某過于瀏覽器兼容問題了,上面有兩種添加事件的方法,為了同一添加事件的方法,我們不得不再重新寫一個通用的添加事件函數,幸虧再有前人幫我們做了這件事

functionaddEvent(elm, evType, fn, useCapture) {
if(elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);//DOM2.0
returntrue;
}
elseif(elm.attachEvent) {
varr = elm.attachEvent(‘on‘ + evType, fn);//IE5+
returnr;
}
else{
elm['on'+ evType] = fn;//DOM 0
}
}


下面是Dean Edwards 的版本

functionaddEvent(element, type, handler) {
//為每一個事件處理函數分派一個唯一的ID
if(!handler.$$guid) handler.$$guid = addEvent.guid++;
//為元素的事件類型創建一個哈希表
if(!element.events) element.events = {};
//為每一個"元素/事件"對創建一個事件處理程序的哈希表
varhandlers = element.events[type];
if(!handlers) {
handlers = element.events[type] = {};
//存儲存在的事件處理函數(如果有)
if(element["on"+ type]) {
handlers[0] = element["on"+ type];
}
}
//將事件處理函數存入哈希表
handlers[handler.$$guid] = handler;
//指派一個全局的事件處理函數來做所有的工作
element["on"+ type] = handleEvent;
};
//用來創建唯一的ID的計數器
addEvent.guid = 1;
functionremoveEvent(element, type, handler) {
//從哈希表中刪除事件處理函數
if(element.events && element.events[type]) {
deleteelement.events[type][handler.$$guid];
}
};
functionhandleEvent(event) {
varreturnValue =true;
//抓獲事件對象(IE使用全局事件對象)
event = event || fixEvent(window.event);
//取得事件處理函數的哈希表的引用
varhandlers =this.events[event.type];
//執行每一個處理函數
for(variinhandlers) {
this.$$handleEvent = handlers[i];
if(this.$$handleEvent(event) ===false) {
returnValue =false;
}
}
returnreturnValue;
};
//為IE的事件對象添加一些“缺失的”函數
functionfixEvent(event) {
//添加標準的W3C方法
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
returnevent;
};
fixEvent.preventDefault =function() {
this.returnValue =false;
};
fixEvent.stopPropagation =function() {
this.cancelBubble =true;
};

功能非常強悍,解決IE的this指向問題,event總是作為第一個參數傳入,跨瀏覽器就更不在話下。

最后貢獻一個HTML5工作組的版本:

varaddEvent=(function(){
if(document.addEventListener){
returnfunction(el,type,fn){
if(el.length){
for(vari=0;i<el.length;i++){
addEvent(el[i],type,fn);
}
}else{
el.addEventListener(type,fn,false);
}
};
}else{
returnfunction(el,type,fn){
if(el.length){
for(vari=0;i<el.length;i++){
addEvent(el[i],type,fn);
}
}else{
el.attachEvent(‘on‘+type,function(){
returnfn.call(el,window.event);
});
}
};
}
})();

可能細心的讀者發現了IE的attachEvent和W3C標準的addEventListener綁定多個事件的執行順序是不一樣的

龐順龍最后編輯于:5年前

內容均為作者獨立觀點,不代表八零IT人立場,如涉及侵權,請及時告知。

評論努力加載中...
暫無評論
暫無評論

手機掃碼閱讀

熱門相關

加載中...
關于我們   聯系我們   申請友鏈   贊助記錄   站點地圖
? 2014 - 2017 www.1255315.live All Rights Reserved. 京ICP備14042174號-1
本站遵循 CC BY 4.0 協議,轉載請注明出處 。
辽宁十一选五走实图 吉林11选5推荐 七星彩最近30期基本走势图 辽宁35选7普通走势图 安徽体彩十一选五手机板 全天免费北京pk拾计划 七乐彩组选专家杀号 加拿大28在线预测99 贵州11选5五码遗漏 山东十一选5前三直漏一定牛 恒利配资