JavaScript基础(30)_事件的冒泡、事件的委派

news2024/11/15 14:07:32

事件的冒泡(Bubble)

所谓的冒泡指的是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的“相同事件”也会被触发。

取消事件冒泡
在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡。取消冒泡代码：event.cancelBubble = true

事件的委派

将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。事件的委派是利用了冒泡，通过委派可以减少事件绑定的次数，从而提高程序的性能。

简单理解就是：原本是某个元素需要绑定的事件，现在将这个事件交给别的元素去做，正常我们把它交给父级元素，比如：原本是给li绑定点击事件，现在交给它父级ul绑定，利用冒泡原理，点击li的时候会触发ul的事件；

案例1：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件的冒泡</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: aquamarine;
            position: relative;
        }

        .box2 {
            width: 250px;
            height: 250px;
            background-color: bisque;
            position: relative;
        }

        .box3 {
            width: 150px;
            height: 150px;
            background-color: chartreuse;
            position: relative;
        }

        span {
            position: absolute;
            bottom: 10px;
            right: 20px;
        }
    </style>
    <script>
        window.onload = function () {
            var box3 = document.getElementsByClassName("box3")[0];
            box3.onclick = function (event) {
                // 解决浏览器兼容性问题
                event = event || window.event;
                // 取消冒泡
                event.cancelBubble = true;
                alert("你好！我是box3");
            }
            var box2 = document.getElementsByClassName("box2")[0];
            box2.onclick = function (event) {
                event = event || window.event;
                event.cancelBubble = true;
                alert("你好！我是box2");
            }
            var box1 = document.getElementsByClassName("box1")[0];
            box1.onclick = function (event) {
                event = event || window.event;
                event.cancelBubble = true;
                alert("你好！我是box1");
            }
        }   
    </script>
</head>
<body>
    <div class="box1">
        <span>我是box1</span>
        <div class="box2">
            <span>我是box2</span>
            <div class="box3">
                <span>我是box3</span>
            </div>
        </div>
    </div>
</body>
</html>

案例2

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>事件的委派</title>
    <script>
        window.onload = function () {
            // 为每一个超链接都绑定一个单机响应事件函数缺点：
            // 1、比较繁琐
            // 2、只能在已有超链接绑定事件，新添加超链接则必须重新绑定

            // 因此：把单击响应事件，委派给其祖先元素，利用冒泡原理，使得后代元素都能触发事件，这能大大简化代码，提高程序性能。
            var ul = document.getElementsByTagName("ul")[0];
            ul.onclick = function (event) {
                event = event||window.event;
                // className中 "N" 是大写,link记得带引号。
                if(event.target.className == "link"){
                    alert("谢谢你的点击！");
                }
            }
            var addA = document.getElementById("addA");
            addA.onclick = function(){
                var li = document.createElement("li");
                // 多重引号冲突时，内部引号变为单引号
                li.innerHTML = "<a href='javascript:;' class='link''>我是新链接</a>";
                ul.appendChild(li);
            }
        }
    </script>
</head>
<body>
    <button id="addA">添加新链接</button>
    <ul>
        <li><a href="javascript:;">不跳转链接</a></li>
        <li><a href="javascript:;" class="link">链接一</a></li>
        <li><a href="javascript:;" class="link">链接二</a></li>
        <li><a href="javascript:;" class="link">链接三</a></li>
    </ul>
</body>
</html>