《JavaScript视频21》冒泡

最新推荐文章于 2024-09-28 21:25:37 发布

原创最新推荐文章于 2024-09-28 21:25:37 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了事件冒泡的概念，即后代元素触发的事件会传播到祖先元素。同时阐述了如何通过`event.cancelBubble=true`阻止事件冒泡。接着，详细讲解了事件委派的原理，通过将事件绑定到共同祖先元素，实现在新添加的子元素上也生效。文章以一个实际示例展示了如何利用事件对象的`target`属性来判断并响应正确的元素。

事件的冒泡

当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。

大部分事件冒泡是有用的，如果不希望冒泡可以通过事件对象来取消冒泡。

event.cancelBubble = true;

事件的委派

可以将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素上进行执行。

事件对象target可以返回触发此事件的元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			

		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				var button1 = document.getElementById("button1");
				var ul1 = document.getElementById("ul1");
				button1.onclick = function(){
					var li = document.createElement("li");
					//注意单引号
					li.innerHTML = "<li><a class='link' href='javascript:;'>这是一个新的超链接</a></li>",
					ul1.appendChild(li);
				};
				//通过将事件绑定给祖先元素，可以实现新添加的同类子元素也能有相同的事件
				ul1.onclick = function(event){
					//事件给谁绑定的，this就是谁，所以this并不是触发事件的对象
					//事件对象target可以返回触发此事件的元素
					event = event || window.event;
					// 通过class的内容来判断触发事件的对象是不是li
					// 但是因为class可以有多个值,所以这儿有隐患,可以通过正则表达式来解决
					if(event.target.className == "link"){
						alert("我是u1的单击响应函数");
					};	
				};
			};

		</script>
	</head>
	<body>
		<button id="button1" type="button">按钮</button>
		<ul id="ul1">
			<li><a class="link" href="javascript:;">这是一个超链接</a></li>
			<li><a class="link" href="javascript:;">这是一个超链接</a></li>
			<li><a class="link" href="javascript:;">这是一个超链接</a></li>
		</ul>

	</body>
</html>

在这里插入图片描述