JavaScript中的冒泡事件和事件的委派

最新推荐文章于 2025-03-25 21:42:30 发布

冰雪奇缘lb

最新推荐文章于 2025-03-25 21:42:30 发布

阅读量362

点赞数

分类专栏： JavaScript复盘重点总结文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/weixin_44682587/article/details/115278784

版权

JavaScript复盘重点总结专栏收录该内容

28 篇文章

订阅专栏

事件的冒泡

所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同时间也会被触发,
在开发中大部分情况冒泡都是有用的,如果不希望发生时间冒泡可以通过事件对象来取消冒泡

	<body>
        <div id="div" style="width: 100px; height: 100px; background-color: black;">
            <span id="span" style="background-color: yellow;">span</span>
        </div>
	</body>
    <script>
        let div = document.getElementById("div");
        let span = document.getElementById("span");
        span.onclick = function(event){
           //取消冒泡
           // 可以将事件对象的cancelBubble设置为true,即可取消冒泡
           // 不同的浏览器编译时event属性所属不同，有的以响应事件函数形参，有的在window对象中，下面的代码用来解决浏览器的兼容问题
           
           alert("我是一个span");
           event = event || window.event;
           event.cancelBubble = true;
       }
       
        div.onclick = function(){
            alert("我是一个div");
        }
    </script>

事件的委派

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

举个例子：点击链接时触发弹出框事件，点击按钮能新创建链接，点击新建的链接依然能触发弹出框事件，点击ul其他部分则不触发

	<body>
        <button id="btn01">添加超链接</button>
	
        <ul id="ul" style="background-color: #bfa;">
            <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>
    <script>
        let btn01 = document.getElementById("btn01");
        let ul = document.getElementById("ul");
        
        btn01.onclick = function(event){
            let ul = document.getElementById("ul");
            let li = document.createElement("li");
            li.innerHTML = "<a href='javascript:;' class='link'>新增的超链接</a>";
            ul.appendChild(li);
        }
        ul.onclick = function(event){
            event = event || window.event;
            // target 
            // event中的target表示的触发事件的对象
            console.log(event.target);
            // 如果触发事件的对象是我们期望的元素，则执行，否则不执行
            if(event.target.className == "link"){   // 如果class = "link  box",则无效，可用正则表达式处理
                alert(event.target);
            }
            
        }
    </script>