onclick()這種寫法是DOM0級規范的寫法，是所有的瀏覽器支持的，但是這種寫法有不能同時綁定多個事件、使代碼耦合在了一起的弊端。但是addEventListener() 是DOM2標准中定義的方法，它可以控制是在事件捕獲階段或者是在冒泡階段調用事件處理程序。既然這個是DOM2標准中定義的，那么只有支持DOM2級事件處理程序的瀏覽器才支持這個方法（IE9,Firefox,Safari,Chrome和Opera支持）。
一、onclick()方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>綁定多個事件</title> 6 <script> 7 window.onload = function(){ 8 document.getElementById('btn').onclick = function () { 9 alert(1); 10 }; 11 document.getElementById('btn').onclick = function () { 12 alert(2); 13 }; 14 } 15 </script> 16 </head> 17 <body> 18 <button id="btn">點我</button> 19 </body> 20 </html>
運行結果是第二個onclick把第一個onclick給覆蓋了，雖然大部分情況用on就可以完成想要的結果，但是有時又需要執行多個相同的事件，很明顯如果用on不能完成
二、addEventListener()方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>綁定多個事件</title> 6 <script> 7 window.onload = function(){ 8 document.getElementById('btn').addEventListener('click', function(){ 9 alert(1); 10 }, false); 11 document.getElementById('btn').addEventListener('click', function(){ 12 alert(2); 13 }, false); 14 } 15 </script> 16 </head> 17 <body> 18 <button id="btn">點我</button> 19 </body> 20 </html>
addEventListenert方法第一個參數填寫事件名，第二個參數是一個函數，第三個參數是指在冒泡階段還是捕獲階段處理事件處理程序。true代表捕獲階段處理， false代表冒泡階段處理。第三個參數可以省略，大多數情況也不需要用到第三個參數，不寫第三個參數默認false