DOM0级与2级在追加事件的区别

最新推荐文章于 2024-05-09 10:19:41 发布

小小怪将军！

最新推荐文章于 2024-05-09 10:19:41 发布

阅读量109

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_45753147/article/details/123422874

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM事件</title>
  <script>
    window.onload=function(){
      // 获取按钮
      var btn=document.getElementById('btn');
      // DOM0级事件 不可追加事件
      btn.onclick=function(){
        console.log('我是被点击了');
      };
      btn.onclick=function(){
        alert('我被点击了');
      };
      // DOM0解绑事件
      btn.onclick=null;
      // DOM2级事件 追加事件 addEventListener();
      // 参数:事件类型 事件处理程序 布尔值 true-在捕获阶段执行 false-在冒泡阶段执行
      function handler1(){
        alert(1)
      }
      function handler2(){
        console.log(2);
      }
      btn.addEventListener('click',handler1,false);
      btn.addEventListener('click',handler2,false);
      // 对DOM2级事件进行解绑
      // removeEventListener 参数：事件类型 事件处理程序(具名函数)
      btn.removeEventListener('click',handler1);
      btn.removeEventListener('click',handler2);
    }
  </script>
</head>
<body>
  <button id="btn">点击我</button>
</body>
</html>

注意：DOM2级事件的解绑通过removeEventListener（‘事件类型’，事件具名函数）=============必须是具名函数/具名函数才不会报错！

小小怪将军！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM0级与2级在追加事件的区别

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM事件</.
复制链接

扫一扫