JS的事件冒泡

最新推荐文章于 2024-07-28 20:27:10 发布

JamTin

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量144

点赞数

文章标签： javascript js dom

本文链接：https://blog.csdn.net/weixin_42760876/article/details/108152895

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

DOM

7 篇文章 0 订阅

订阅专栏

JS的事件冒泡和委派

直接演示一下什么是JS的事件冒泡，上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#box1 {
			height: 12.5rem;
			width: 12.5rem;
			background-color: green;
		}
		span {
			background-color: yellow;
		}
	</style>
	<body>
		<div id="box1">
			我是box1 <span>我是span</span>
		</div>
	</body>
</html>

在这里插入图片描述

给box1和span还有body绑定响应函数：

<script type="text/javascript">
    window.onload = function() {
    var box1 = document.getElementById("box1");
    var span = document.getElementById("span");
    box1.onclick = function() {
        alert("我是box1的点击响应函数");
    }
    span.onclick = function() {
        alert("我是span的点击响应函数");
    }
    document.body.onclick = function() {
        alert("我是body的点击响应函数");
    }
}
</script>

当鼠标点击到对应区域时触发它的函数，span在box1里，而box1又在body里，点span区域的时候顺序触发了span、box1和body的点击函数，这就是事件冒泡。

事件的冒泡（Bubble）

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

在开发中大部分情况冒泡都是有用的，如果不希望发生时间冒泡可以通过事件对象来取消冒泡。

span.onclick = function(event) {
    alert("我是span的点击响应函数");
    event.cancelBubble = true;
}

事件的委派

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

先写几个超链接，并为他们添加点击事件。

<body>
    <input type="button" id="btn1" value="按钮" />
    <ul id="u1">
        <li><a href="javascript:;">超链接一</a></li>
        <li><a href="javascript:;">超链接二</a></li>
        <li><a href="javascript:;">超链接三</a></li>
    </ul>
</body>

<script type="text/javascript">
    window.onload = function() {
        //获取所有a
        var allA = document.getElementsByTagName("a");
        //遍历
        for (var i = 0; i < allA.length; i++) {
            allA[i].onclick = function() {
                alert("我是li的点击响应函数");
            }
        }
    }
</script>

在这里插入图片描述

这样每次点击超链接都会触发alert，这是操作已有的超链接，而且每一个超链接就绑定一个事件，性能较差。

下面为按钮添加点击事件，

var u1 = document.getElementById("u1");
var btn1 = document.getElementById("btn1")
//点击按钮添加超链接
btn1.onclick = function() {
    //创建一个<li>
    var li = document.createElement("li");
    li.innerHTML = "<a href='javascript:;'>新建的超链接</a>"

    //将li添加到ul
    u1.appendChild(li);
}

在这里插入图片描述

后面新增的超链接并没有添加到点击事件。

我们希望只绑定一次事件，就应用到多个元素上，即使元素是后面增加的。我们可以尝试将其绑定给元素的共同祖先元素。比如每个li都有共同的ul。

u1.onclick = function() {
    alert("我是ul的点击响应函数");
}

因为a标签是后代，它会冒泡到祖先，这样实现了只绑定一次函数就可以为所有的超链接添加点击事件，包括新增的超链接。但是因为冒泡到了ul，整个ul区域都会有影响，这里可以使用event的target来做判断。

//给a标签加上class
<ul id="u1">
    <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>

//target通过class获取
u1.onclick = function(event) {
    if(event.target.className == "link"){
        alert("我是ul的点击响应函数");
    }
}

JamTin

关注

0
点赞
踩
1

收藏

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

JS的事件冒泡和委派直接演示一下什么是JS的事件冒泡，上代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> #box1 { height: 12.5rem; width: 12.5rem; background-colo
复制链接

扫一扫

专栏目录