有時候一個一個元素要綁定多個事件，其實是分開寫
先看這個例子，我們預期它先執行alert1，然后是alert2，但事實上是沒有alert1，因為覆蓋了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>綁定多個事件</title> <script> window.onload = function(){ document.getElementById('btn').onclick = function () { alert(1); }; document.getElementById('btn').onclick = function () { alert(2); }; } </script> </head> <body> <button id="btn">點我</button> </body> </html>
只需要使用addEventListener方法即可解決這個問題：
<script> window.onload = function(){ document.getElementById('btn').addEventListener('click', function(){ alert(1); }, false); document.getElementById('btn').addEventListener('click', function(){ alert(2); }, false); } </script>
其中addEventListener的參數值得說一下，第一個參數是事件名稱，沒有on，第二個是回調函數，其實是瀏覽器調用的，第三個是 是否捕獲階段觸發，一般設置為false，還有就是這個方法是先綁定的先執行
另外，經過測試，發現這個addEventListener在IE8及一下版本不支持，可以使用attachEvent方法開替代，當然，是兼容處理
這個用法如下：
元素.attachEvent( 'onclick', function(){...} );
這個方法是先綁定的后執行，當然，如果你這么介意順序，就沒必要分開綁定了
轉自：https://blog.csdn.net/qq_38238041/article/details/86797019