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

如果新增相同的事件,後面的會覆寫前面的事件

相關推薦：

js中DOM事件綁定詳解

JQuery中DOM事件綁定用法詳解_jquery

以上是javascript中DOM事件綁定的內容分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！