JavaScript中的事件流(事件捕获/冒泡)

一.事件流

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>

猜你喜欢

转载自blog.csdn.net/qq_43434300/article/details/84977609