有时候一个一个元素要绑定多个事件，其实是分开写
先看这个例子，我们预期它先执行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