JavaScript的冒泡事件

最新推荐文章于 2023-11-14 21:30:05 发布

Trevor Lan

最新推荐文章于 2023-11-14 21:30:05 发布

阅读量738

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lwqBrell/article/details/90380203

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

addEventListener() 方法

document.getElementById("myBtn").addEventListener("click", doevent);

addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
我们可以向同个元素添加一个或多个同类型的事件句柄。
如果要移除事件则可以使用removeEventListener() 方法

事件冒泡或事件捕获？

假如我们你将 <button> 元素插入到 <div> 元素中，然后点击 <button> 元素, 哪个元素的 "click" 事件先被触发呢？

<div id="dodiv" style="border: 2px solid gray">
    <button id="dobutton">event</button>
</div>

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

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

addEventListener的第三个参数可以设置冒泡或捕获，默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);

防止冒泡

有冒泡事件的情况下可以使用stopPropagation()来停止冒泡

解决方案一

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8">
    <title>javascript事件</title>
</head>
<body>
    <div id="dodiv" style="border: 2px solid gray">
        <button id="dobutton">event</button>
    </div>
    <script>
        document.getElementById("dodiv").addEventListener("click", function (event) {
            alert("div");
            // 停止冒泡
            event.stopPropagation();
        });
        document.getElementById("dobutton").addEventListener("click", function (event) {
            alert("button");
             // 停止冒泡
            event.stopPropagation();
        });
    </script>
</body>
</html>

解决方案二

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8">
    <title>javascript事件</title>
</head>
<body>
    <div id="dodiv" style="border: 2px solid gray">
        <button id="dobutton">event</button>
    </div>
    <script>
        document.getElementById("dodiv").addEventListener("click", function (event) {
            if(event.target == event.currentTarget)
			{
			    alert("div");
			}
        });
        document.getElementById("dobutton").addEventListener("click", function (event) {
            if(event.target == event.currentTarget)
			{
			    alert("dobutton");
			}
        });
    </script>
</body>
</html>

Trevor Lan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的冒泡事件

addEventListener() 方法document.getElementById("myBtn").addEventListener("click", doevent);addEventListener() 方法用于向指定元素添加事件句柄。 addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。我们可以向同个元素添加一个或多个同类型的事件句柄。...
复制链接

扫一扫