JavaScript的冒泡事件

川长思鸟来 2022-01-29 02:23 222阅读 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>