事件的冒泡——JS

最新推荐文章于 2023-03-06 21:10:42 发布

_洋

最新推荐文章于 2023-03-06 21:10:42 发布

阅读量151

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/124026319

版权

JavaScript 专栏收录该内容

52 篇文章

订阅专栏

文章目录

事件的冒泡（Bubble)
冒泡的取消
冒泡的应用：事件委派
- 委派定义：

事件的冒泡（Bubble)

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

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box1{
            width: 300px;
            height: 300px;
            background-color: rgb(255, 200, 209);
        }
        #s1{
            background-color: rgb(173, 109, 173);
        }

    </style>
    <script>
        window.onload = function(){
            // 为s1绑定一个单机响应函数
            var s1 =document.getElementById("s1");
            s1.onclick = function(){
                alert("我是span的单击响应函数");
            };
             // 为box1绑定一个单机响应函数
            var box1 =document.getElementById("box1");
            box1.onclick = function(){
                alert("我是div的单击响应函数");
            };
            // 为body绑定一个单机响应函数
            document.body.onclick = function(){
                 alert("我是body的单击响应函数");
            }
        }

    </script>   
</head>
<body>
    <div id = "box1">
        我是box1
        <span id = "s1">我是span</span>
    </div>
</body>
</html>

输出：
当点击 ”我是span“，弹出3个alert
在这里插入图片描述

冒泡的取消

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box1{
            width: 300px;
            height: 300px;
            background-color: rgb(255, 200, 209);
        }
        #s1{
            background-color: rgb(173, 109, 173);
        }

    </style>
    <script>
        window.onload = function(){
            // 为s1绑定一个单机响应函数
            var s1 =document.getElementById("s1");
            s1.onclick = function(event){
                event = event || window.event;
                event.cancelBubble = true;
                alert("我是span的单击响应函数");
            };
             // 为box1绑定一个单机响应函数
            var box1 =document.getElementById("box1");
            box1.onclick = function(event){
                 event = event || window.event;
                 event.cancelBubble = true;
                alert("我是div的单击响应函数");
            };
            // 为body绑定一个单机响应函数
            document.body.onclick = function(){
                 alert("我是body的单击响应函数");
            }


        }

    </script>   
</head>
<body>
    <div id = "box1">
        我是box1
        <span id = "s1">我是span</span>
    </div>
</body>
</html>

冒泡的应用：事件委派

问题的产生：对于新添加的 a 标签还必须重新响应函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        window.onload=function(){
        var btn = document.getElementById("btn1");
        btn.onclick = function(){
            // alert("你好呀");
            var li =document.createElement("li");
            li.innerHTML="<a href='javascript:;''>添加的超链接</a>";
            var ul =document.getElementsByTagName("ul")[0];
            ul.appendChild(li);
        }


        // 为每个超链接都绑定一个单机响应函数
        // 这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
        var allA = document.getElementsByTagName("a");
        for(var i =0;i<allA.length;i++){
            allA[i].onclick = function(){
                alert("a的单机响应函数");
            };
        }
        }

    </script>
</head>
<body>
    <button id="btn1">添加一个超链接</button>
    <ul id="ul">
        <li><a href="javascript:;">超链接一</a></li>
        <li><a href="javascript:;">超链接二</a></li>
        <li><a href="javascript:;">超链接三</a></li>
    </ul>
    
</body>
</html>

我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的我们可以尝试将其绑定给元素的共同的祖先元素。
这就引出了事件的委派：

委派定义：

事件的委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。

事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

对上面的改进：

<script>
        window.onload=function(){
        var btn = document.getElementById("btn1");
        var ul =document.getElementsByTagName("ul")[0];
        btn.onclick = function(){
            var li =document.createElement("li");
            li.innerHTML="<a href='javascript:;''>添加的超链接</a>";
            ul.appendChild(li);
        }


    //    为ul绑定响应函数
        ul.onclick = function(){
            alert("ul的单击响应函数");
        }
    
        }

    </script>

问题：ul的范围很大，不止点击超链接或触发响应函数，只要在ul内都会触发响应函数。
解决：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        window.onload=function(){
        var btn = document.getElementById("btn1");
        var ul =document.getElementsByTagName("ul")[0];
        btn.onclick = function(){
            var li =document.createElement("li");
            li.innerHTML="<a href='javascript:;''>添加的超链接</a>";
            ul.appendChild(li);
        }


    //    为ul绑定响应函数
        ul.onclick = function(event){
            event = event || window.event; 
            // target:event中的target表示的触发事件的对象
           if(event.target.className == "link"){
                alert("ul的单击响应函数");
           }
        }
    
        }

    </script>
</head>
<body>
    <button id="btn1">添加一个超链接</button>
    <ul id="ul">
        <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>