DOM 2 級(jí)事件
element.addEventListener(type,handler,boolean)
第一個(gè)值代表事件類(lèi)型唁情,不加on貌矿。
第二個(gè)是執(zhí)行的方法办龄。(事件處理函數(shù))
第三個(gè)值是一個(gè)布爾值优训,默認(rèn)為false,只在冒泡階段執(zhí)行崭添。true為在捕獲階段執(zhí)行
element.removeEventListener(type,handler,boolean)
第一個(gè)值代表事件類(lèi)型,不加on叛氨。
第二個(gè)是執(zhí)行的方法呼渣。(事件處理函數(shù))
第三個(gè)值是一個(gè)布爾值,默認(rèn)為false寞埠,只在冒泡階段執(zhí)行屁置。true為在捕獲階段執(zhí)行
移除事件。用法與addEventListener一致仁连。
element.attachEvent(type,handler) IE的事件綁定蓝角。
element.detachEvent(type,handler) IE的事件移除饭冬。
第一個(gè)值代表事件類(lèi)型使鹅,加on。
第二個(gè)是執(zhí)行的方法昌抠。(事件處理函數(shù)),
由于IE的事件模型只有冒泡模型,所以,只用傳兩個(gè)值.
兩種綁定的區(qū)別:ie與DOM事件綁定的區(qū)別
addEventListener():
1-事件名稱(chēng)不帶on ;
2-同一個(gè) 節(jié)點(diǎn)對(duì)象 可以綁定多個(gè) 事件函數(shù)
3-執(zhí)行事件函數(shù)的順序是正序患朱;
4-this指向 節(jié)點(diǎn)對(duì)象obj;
5-有捕獲 當(dāng)參數(shù)是true時(shí) 表示捕獲 false 指冒泡 (默認(rèn))
attachEvent():
1-事件名稱(chēng)帶on;
2-同一個(gè) 節(jié)點(diǎn)對(duì)象 可以綁定多個(gè) 事件函數(shù)
3-執(zhí)行事件函數(shù)的順序是倒序;
4-this指向 windoew對(duì)象; 使用函數(shù)的call()方法 改變this的指向
5-沒(méi)有捕獲
添加跨瀏覽器事件綁定
var addEvent = function(ele,type,handler){
if(ele.addEventListener){
ele.addEventListener(type,handler,false)
}else if(ele.attachEvent){
ele.attachEvent("on"+type,handler)
}else{
ele["on"+type]=handler
}
}
addEvent(btn,"click",function(){console.log("點(diǎn)擊")})
移除跨瀏覽器綁定
function removeEvent(ele,type,handler){
if(ele.removeEventListener){
ele.removeEventListener(type,handler,false)
}
else if(ele.detachEvent){
ele.detachEvent('on'+type,handler)
}
else{
ele['on'+type]=null
}
}
removeEvent(btn,"click",function(){console.log("點(diǎn)擊")})
DOM 0 級(jí)事件
HTML中的on-屬性
<button id="btn" onclick="console.log(1)">確定</button>
<button id="btn" onclick="fn()">確定</button>
引號(hào)中字符的是可以執(zhí)行的字符串
由于HTML中的on-方法使得js與HTML緊密的耦合在一起炊苫,不利于后期維護(hù)裁厅,所以不推薦使用。
DOM 0級(jí)事件
var btn=document.getElementById("btn")
btn.onclick=function(){
console.log(1);
}
btn.onclick=function(){
console.log(2);
}//2
如果添加相同的事件,后面的會(huì)覆蓋前面的事件