這篇文章帶給大家的內容是關於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緊密的耦合在一起，不利於後期維護，所以不建議使用。
var btn=document.getElementById("btn")
btn.onclick=function(){
console.log(1);
}
btn.onclick=function(){
console.log(2);
}//2如果新增相同的事件,後面的會覆寫前面的事件
相關推薦：
以上是javascript中DOM事件綁定的內容分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
