jQuery学习日记（四）：DOM level 2事件传播机制

在DOM 2 级事件模型中，一旦事件被触发，事件流会先从DOM的顶端向下传播直至目标节点，该阶段称之为捕获，到达了目标节点后会原路返回，从目标节点向上传播直至DOM顶端，该阶段称之为冒泡。

上图为事件传播模型，很多初学者刚开始接触事件传播的时候非常犯头疼，无法理解事件传播究竟是怎么一回事，在这里我用一个例子来讲解一下；

我有如下HTML代码：

<div>div
	<ul>ul
		<li>li
			<span>span
				<button>button</button>
			</span>
		</li>
	</ul>
</div>

用JS给所有button的父元素加上事件：

$(document).ready(function() {
	var node = document.getElementsByTagName("button")[0];
	
	node.addEventListener("click", function(event){
			console.log(this.nodeName);
		}, false);
	
	var tag = node.parentNode;
	while(tag != null){
		tag.addEventListener("click", function(event){
			console.log(this.nodeName);
		}, false);
		tag = tag.parentNode;
	}
});

为了读者能够更直观的看到，用CSS对样式进行控制，页面呈现：

当我们点击按钮 button 的时候，实际上我们触发的并不只有 button 按钮，由于我们给所有元素加上事件，我们触发的是 button 以及所有 button 的父元素，当点击 button的时候，chrome控制台打印如下信息：

事件的传播类型可以在绑定事件时设置

addEventListener(type, function, useCapture);

useCapture 为 true 时，则事件发生在捕获阶段；

useCapture 为 false 时，则事件发生在冒泡阶段；

通常情况下，我们只设置事件在冒泡阶段发生，可以使用事件函数中传递的 event 对象来停止事件传播

event.stopPropagation();