JS一个元素怎么绑定多个事件

有时候一个一个元素要绑定多个事件，其实是分开写

先看这个例子，我们预期它先执行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

posted @ 2021-01-17 14:43  vickylinj  阅读(1538)  评论(0)  编辑  收藏  举报