JavaScript教程（十）JavaScript中的事件流②(事件捕获/冒泡)

最新推荐文章于 2022-04-23 19:49:39 发布

豆皮没有豆

最新推荐文章于 2022-04-23 19:49:39 发布

阅读量167

点赞数

分类专栏： JavaScript 文章标签： web前端 JavaScript JavaScript事件流 JavaScript事件捕获 JavaScript事件冒泡

本文链接：https://blog.csdn.net/qq_43434300/article/details/84977609

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一.事件流

1.事件流的介绍:
事件流描述的是从页面中接收事件的顺序.
事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件.
2.事件流包括两种模式：冒泡和捕获.
(1)事件冒泡:是指子元素和父元素具备同样的事件,当触发子元素的事件时,也会触发父元素的事件(由内至外).子集元素先触发，父级元素后触发.
(2)事件捕获:与事件冒泡相反,父级元素先触发，子集元素后触发.
例:

<script type="text/javascript">
	window.onload=function(){
		var div1=document.getElementById('div1');
		var div2=document.getElementById('div2');
		div1.style.width=200+'px';
		div1.style.height=200+'px';
		div1.style.border='1px solid red';
		div2.style.width=100+'px';
		div2.style.height=100+'px';
		div2.style.border='1px solid yellow';
		div1.onclick=function(){
			div1.style.background='aqua';
		}
		div2.onclick=function(){
			div2.style.background='darkorchid';
		}
	}
</script>
...............
<body>
	<div id="div1">
		<div id="div2"></div>
	</div>
</body>