javascript中DOM事件綁定的內容分析

本篇文章給大家帶來的內容是關於javascript中DOM事件綁定的內容分析，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

DOM 2 級事件

element.addEventListener(type,handler,boolean)
第一個值代表事件類型，不加on。
第二個是執行的方法。(事件處理函數)
第三個值是一個布爾值，預設為false，只在冒泡階段執行。true為在捕獲階段執行

element.removeEventListener(type,handler,boolean)
第一個值代表事件類型，不加on。
第二個是執行的方法。(事件處理函數)
第三個值是一個布爾值，預設為false，只在冒泡階段執行。true為在捕獲階段執行
移除事件。用法與addEventListener一致。

element.attachEvent(type,handler) IE的事件綁定。
element.detachEvent(type，handler) IE的事件移除。
第一個值代表事件類型，加on。
第二個是執行的方法。(事件處理函數),
由於IE的事件模型只有冒泡模型,所以,只用傳兩個值.

添加跨瀏覽器事件綁定

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("點擊")})

移除跨瀏覽器綁定

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("點擊")})

DOM 0 級事件
HTML中的on-屬性

<button id="btn" onclick="console.log(1)">確定</button><button id="btn" onclick="fn()">確定</button>

引號中字元的是可以執行的字串
由於HTML中的on-方法使得js與HTML緊密的耦合在一起，不利於後期維護，所以不推薦使用。

DOM 0級事件

var btn=document.getElementById("btn")btn.onclick=function(){    console.log(1);}btn.onclick=function(){    console.log(2);}//2

如果添加相同的事件,後面的會覆蓋前面的事件