JS基础--addEventListener 事件绑定

最新推荐文章于 2024-07-01 16:22:16 发布

原创最新推荐文章于 2024-07-01 16:22:16 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js基础 #addEventListener #js捕获和冒泡 #前端基础

前端同时被 2 个专栏收录

9 篇文章

订阅专栏

js基础

6 篇文章

订阅专栏

本文介绍了JavaScript中事件绑定函数addEventListener的用法，包括事件处理函数的注册、事件的捕获与冒泡阶段，以及通过addEventListener实现的事件监听流程。

在 JS 中可以通过事件绑定函数 addEventListener( ) 为指定元素对象绑定事件处理函数，且使用此函数可以为同一事件目标注册多个不同函数作为事件处理器。语法格式如下

objectTarget.addEventListener(" eventType ", handler , captureFlag );

上面方法为 objectTarget 绑定事件处理器 handler ，其中的参数意义为：

参数一：事件类型字符串（事件类型的属性不带 on ，如 click 事件，mousedown 、keypass 等）；

参数二：事件处理函数。（自己编写的函数）

参数三：指定监听事件传播的那个阶段（为 true 和 false 两个值，为 true 时表示捕获阶段，false 表示冒泡阶段）。

事件传递有两种方式：冒泡与捕获

捕获方式：就是在执行时从外到内的执行函数，即从父集向子集层执行；

冒泡方式：就是在执行时从外到内的执行函数，即从父集向子集层执行；

例如：

如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。

下面的代码中说明了这一点：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>
    
<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
	<p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">点击段落，我是捕获。 </p>
</div>
    <script>
        document.getElementById("myP").addEventListener("click", function() {
            alert("你点击了 P 元素!");
        }, false);
        document.getElementById("myDiv").addEventListener("click", function() {
            alert(" 你点击了 DIV 元素 !");
        }, false);
        document.getElementById("myP2").addEventListener("click", function() {
            alert("你点击了 P2 元素!");
        }, true);
        document.getElementById("myDiv2").addEventListener("click", function() {
            alert("你点击了 DIV2 元素 !");
        }, true);
    </script>

</body>
</html>

借助图示来理解一下