一个Dom绑定多个事件

最新推荐文章于 2022-03-02 15:10:46 发布

别动我代码儿

最新推荐文章于 2022-03-02 15:10:46 发布

阅读量3.5k

点赞数

分类专栏：算法积累工作笔记文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_45176415/article/details/107930853

版权

工作笔记同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

算法积累

7 篇文章 1 订阅

订阅专栏

在原生操作dom元素的时候，常常需要用到一个dom绑定多个事件，比如一个元素既要点击又要数遍移入；要同时监听到两个事件原生需要addEventlistener

直接上代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>绑定多个事件</title>
  </head>
  <body>
    <button id="btn">点击显示</button>显示：
    <div id="box"></div>
  </body>
  <script>
    window.onload = function () {
      var box = document.getElementById("box");
      document.getElementById("btn").addEventListener("click", function () {
        box.innerText = "这是第一个元素";
      });
      document.getElementById("btn").addEventListener("dblclick", function () {
        box.innerText = "这是第二个元素";
      });
    };
  </script>
</html>

addEventListener的参数值得说一下，
第一个参数是事件名称，没有on，
第二个是回调函数，其实是浏览器调用的，
第三个是是否捕获阶段触发，一般设置为false，
还有就是这个方法是先绑定的先执行

另外，经过测试，发现这个addEventListener在IE8及一下版本不支持，可以使用attachEvent方法开替代，当然，是兼容处理

这个用法如下：

元素.attachEvent( 'onclick', function(){...} );

如果是JQuery库的话使用on即可：

$("#btn").on("click", function () {
        $("#box").text("这是第二个元素");
  });

别动我代码儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
一个Dom绑定多个事件

在原生操作dom元素的时候，常常需要用到一个dom绑定多个事件，比如一个元素既要点击又要数遍移入；要同时监听到两个事件原生需要addEventlistener直接上代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>绑定多个事件</title> </head> <body> &
复制链接

扫一扫