事件冒泡、事件捕获、事件委托相关内容

最新推荐文章于 2025-12-15 15:15:21 发布

原创最新推荐文章于 2025-12-15 15:15:21 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文深入解析事件流的概念，包括事件捕获、目标阶段和事件冒泡阶段，并介绍了事件委托（事件代理）的原理与实践，通过实例展示了如何利用事件委托提高网页性能。

事件相关的这些概念，之前一直没注意，今天整理一下

1、事件流

事件流描述的是从页面接受事件的顺序。
事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。一般情况下捕获阶段不会涉及事件目标，但IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。
事件监听和移除事件监听分别是：addEventListener()、removeEventListener()，所有DOM节点都包含这两个方法，接受三个参数分别是：处理事件名，事件处理函数和布尔值。如果为true，则在捕获阶段调用处理函数，如果为false，则在冒泡阶段调用处理函数，大多数情况下都是将事件处理程序放在冒泡阶段。

2、事件冒泡

事件开始时由最具体的元素节点接收，然后沿DOM树逐级向上传播到较为不具体的元素节点（document），高版本的浏览器会一直冒泡到window对象。

3、事件捕获

事件捕获在于事件到达目标之前捕获它。
事件开始时不太具体的节点(document)更早接收到事件，然后事件沿DOM树依次向下传播，直到实际目标。（高版本浏览器从window对象开始捕获事件。

4、事件委托(事件代理)

如果页面存在大量元素，且每个元素都要一次或多次绑定事件处理器（如onclick），这种情况会影响性能。浏览器需要跟踪每个事件处理器，每绑定一个事件处理器，需要访问和修改的DOM元素就越多，占用内存越多，应用程序就会越慢。
这种情况适合使用事件委托。事件委托基于事件逐层冒泡并能被父类元素捕获。使用事件代理，只需给外层元素绑定一个处理器，就可处理在其子元素上触发的所有事件。

实例：
HTML部分

<ul id="ulst">
	<li><a href="http://www.baidu.com">1</a></li>    
	<li><a href="http://www.baidu.com">2</a></li>    
	<li><a href="http://www.baidu.com">3</a></li>    
	<li><a href="http://www.baidu.com">4</a></li>    	
	<li><a href="http://www.baidu.com">5</a></li>
</ul>

JS部分

let ulst = document.getElementById('ulst');
ulst.addEventListener('click', function(e){ 	
	e = e || window.event; 
      	let target = e.target || e.srcElement; 
        if(target.nodeName === 'A'){ 
        	if(typeof e.preventDefault === 'function'){ 
                	// 阻止非IE默认事件和冒泡
                        e.preventDefault(); 
                        e.stopPropagation();        
                }else {            
   			// 阻止IE默认事件和冒泡            
   			e.returnValue = false;
               		e.cancelBubble = true;       
             	}       
    		// 弹出对应数字 
           	alert(target.text);
	}
});