理解JS事件冒泡与捕获原理-优快云博客

本文链接：https://blog.youkuaiyun.com/xqf309/article/details/8557493

使用js的时候，当给子元素和父元素定义了相同的事件，比如都定义了onclick事件，单击子元素时，父元素的onclick事件也会被触发。js里称这种事件连续发生的机制为事件冒泡或者事件捕获。

为什么会有事件冒泡，又有捕获呢？应为当初IE浏览器和Natscape浏览器分别对自己浏览器的事件采用了不同的发生机制，IE浏览器采用了冒泡型：定义有相同事件的嵌套元素，当事件被触发时，子元素拥有优先权，即从里向外发生，像水里的泡泡一样从里向外冒。而Netscape采用了相反的做法，即捕获型，父元素拥有优先权，最外层的元素最先发生。

后来W3C组织统一了标准，在任何的W3C的事件模型中，事件先进入有外向里进入捕获阶段，再由里向外进入冒泡阶段。

这是一个非常简单的事件冒泡的小Demon，读者可以复制在txt里，保存成.html运行下。

<html>
<head>
<title>JS冒泡</title>
	<style type="text/css">
	#big{
		background-color:#056FD3;
		width:400px;
		height:400px;
	}
	#normal{
		background-color:#74DEF8;
		width:200px;
		height:200px;
		margin:100px;
	}
	#small{
		background-color:#F5E84D;
		width:100px;
		height:100px;
		margin:50px;
	}
	</style>
</head>
<body>
	<div id="big" οnclick="alert('I am biggest')">
		<div id="normal" οnclick="alert('I am normal')">
			<div id="small" οnclick="alert('I am small')">
				
			</div>
		</div>
	</div>
</body>
</html>

JS事件捕获与冒泡