在原生js中的事件監聽方法

一、傳統事件綁定方法
我們在學習的時候，最初接觸的事件綁定方式大多是傳統事件綁定方法。傳統事件綁定方法事例如下：

window.οnlοad=function(){alert("頁面已加載");
}
document.getElementById("btn").οnclick=function(){alert("按鈕被點擊");
}
document.οnmοusemοve=function(){console.log("鼠標在移動");
}

　　

傳統事件綁定方法的特點如下：

1. 事件名稱之間一定要加上on，比如：onclick、onload、onmousemove。

2. 兼容主流的瀏覽器，包括低版本的IE。

3. 當同一個元素綁定多個事件時，只有最后一個事件會被添加，并且傳播模式只能是冒泡模式。

二、addEventListener()
方法事例：

window.addEventListener('load',init,false);function init(){alert("頁面加載成功");
}
// 下面寫法與上面等價
window.addEventListener('load',function(){alert("頁面加載成功");
},false);

　　

addEventListener()方法特點：

element.addEventListener(event, function, useCapture)中的第三個參數可以控制指定事件是否在捕獲或冒泡階段執行。true - 事件句柄在捕獲階段執行。false- 默認- 事件句柄在冒泡階段執行。

addEventListener() 可以給同一個元素綁定多個事件，不會發生覆蓋的情況。如果給同一個元素綁定多個事件，那么采用先綁定先執行的規則。

addEventListener() 在綁定事件的時候，事件名稱之前不需帶 on 。

注意該方法的兼容性，如果要兼容 IE6-8 ，不能使用該方法，可以采用以下方法。

可以使用 removeEventListener() 來移除之前綁定過的事件。

// 向 <div> 元素添加事件句柄
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// 移除 <div> 元素的事件句柄
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

三、attachEvent()
方法事例：
window.attachEvent('onload',function(){
　　alert("頁面加載成功");
});

attachEvent()方法特點：

attachEvent是 IE 有的方法，它不遵循W3C標準，而其他的主流瀏覽器如FF等遵循W3C標準的瀏覽器都使用addEventListener，所以實際開發中需分開處理。

attachEvent()是 后綁定先執行。

綁定時間時，attachEvent必須帶 on，如 onclick，onmouseover 等

?

?

在我們實際的項目里面，在使用原生js綁定事件的時候，大多數情況下會使用 addEventListener() ，因為目前來說很少有人使用低版本IE了，大多數項目不會要求兼容 IE6-8 。
如果項目要求兼容 IE6-8 ，這個時候可以考慮 attachEvent()，但是不建議這樣使用，這樣的話需要些兼容代碼，不僅繁瑣而且容易出錯，這個時候就建議使用jQuery庫直接進行事件綁定，jQuery已經幫我們做好了兼容處理的工作，直接飲用，提高效率。
---------------------

原文來自：https://blog.csdn.net/fengzhen8023/article/details/81453753

?