js学习 DOM EventListener 以及 JavaScript事件

最新推荐文章于 2022-06-26 23:39:50 发布

原创最新推荐文章于 2022-06-26 23:39:50 发布 · 981 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

web 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了DOM中的事件监听方法，包括addEvenListener()和removeEventListener()的使用，以及JavaScript事件流的概念，如事件冒泡和事件捕获的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM EventListener:
方法：addEvenListener():

1.addEvenListener():           /添加句柄
   方法用于向指定元素添加事件句柄
2.removeEventListener():       /移除句柄
   移除方法添加的事件句柄
<body>
   <p id="pid">Hello</p>
   <button id="btn"></button>
   <script type="text/javascript">
   //       document.getElementById("btn").addEventListener("click",function(){
   //           alert("Hello")
   //       }); 此时点击按钮会显示警示框"Hello"
           var x = document.getElementById("btn");
           x.addEventListener("click",hello);
           x.addEventListener("click",world);           //   添加句柄注意 world和hello后面不能添加()
           x.removeEventListener("click",world);       // 移除句柄       移除 "world"警示框
           function hello(){
               alert("Hello");
           }                                           //编写的时候在语句后面一定要加;号
           function world(){
               alert("world");
           }
   </script>
</body>

########################################

JavaScript事件

1. 事件流
   描述的是在页面中接受事件的顺序
2. 事件冒泡
   由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）
<body>
   <div id="div">
       <button id="btn">button</button>   
   </div>
</body>
3. 事件捕获
   最不具体的节点先接受事件，而最具体的节点应该是最后接收事件