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

1、傳統事件綁定方法
咱們在學習的時候，最初接觸的事件綁定方式大可能是傳統事件綁定方法。傳統事件綁定方法事例以下：

window.onload=function(){
    alert("頁面已加載");
}
document.getElementById("btn").onclick=function(){
    alert("按鈕被點擊");
}
document.onmousemove=function(){
    console.log("鼠標在移動");
}

　　

傳統事件綁定方法的特色以下：

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

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

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

2、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);

3、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