一、傳統事件綁定方法
我們在學習的時候，最初接觸的事件綁定方式大多是傳統事件綁定方法。傳統事件綁定方法事例如下：
window.onload=function(){
alert("頁面加載完畢");
}
document.getElementById("btn").onclick=function(){
alert("按鈕被點擊");
}
document.onmousemove=function(){
console.log("鼠標在移動");
}
傳統事件綁定方法的特點如下：
事件名稱之間一定要加上on，比如：onclick、onload、onmousemove。
兼容主流的瀏覽器，包括低版本的IE。
當同一個元素綁定多個事件時，只有最后一個事件會被添加，並且傳播模式只能是冒泡模式。
二、addEventListener()
方法事例：
window.addEventListener('load',init,false);
function init(){
alert("頁面加載成功");
}
// 下面寫法與上面等價
window.addEventListener('load',function(){
alert("頁面加載成功");
},false);
瀏覽器兼容性： Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。
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已經幫我們做好了兼容處理的工作，直接飲用，提高效率。
---------------------
來源：CSDN
原文：https://blog.csdn.net/fengzhen8023/article/details/81453753