园龄：6年11个月粉丝：0 关注：4

阻止事件冒泡与事件代理(委托)详解

DOM事件流

DOM事件流（event flow）描述的是从页面中接受事件的顺序。

事件发生时会在元素节点之间按照特定顺序传播（propagation），这个传播过程即为DOM事件流。

DOM事件流分为3个阶段：

捕获阶段

从document对象传导至目标节点（上层传到底层），称为“捕获阶段（capture phase）”。捕获阶段不会响应任何事件。
当前目标阶段

在目标节点上触发事件，称为“目标阶段（target phase）”。
冒泡阶段

从目标节点传导回document对象（从底层传到上层），称为“冒泡阶段（bubbling phase）”。事件代理即是利用事件冒泡的机制把里层所需要响应的时间绑定到外层。

事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点.

事件捕获：网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

注意：

JS 代码中只能执行捕获或者冒泡其中的一个阶段。
onclick和attachEvent只能得到冒泡阶段。
addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
有些事件是没有冒泡的，比如：onblur、onfocus、onmouseenter、onmouseleave

阻止事件冒泡

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到 DOM 最顶层节点。

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

标准写法：利用事件对象里面的stopPropagation()方法
```
  e.stopPropagation(); 
```
非标准写法：IE 6-8 利用事件对象cancelBubble属性
```
 e.cancelBubble = true;
```

阻止事件冒泡的兼容性解决方案

 if(e && e.stopPropagation){
    e.stopPropagation();
}else{
    window.event.cancelBubble = true;
}

事件代理(委托)

引言：

假设一个班有100个学生，快递员有100个快递，如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，快递员和学生都会花费大量时间。那么，如何解决这种问题，节省时间呢？

解决方案：快递员把100个快递，委托给班主任，班主任把这些快递放到办公室，学生下课自行到办公室领取即可。

在上例中，取快递就是一个事件，每个同学指的是需要响应事件的DOM元素，而班主任就是一个代理元素，快递员把快递放在班主任处，学生统一到办公室领取自己的快递，所以真正绑定事件的就是班主任。

事件委托的概念

通过以上举例引出事件代理的概念：

事件代理（Event Delegation），在jQuery中称为事件委托，是JavaScript中常用绑定事件的常用技巧。

事件代理的原理即是DOM元素的事件冒泡。不给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理作用到每个子节点上。

事件委托的作用

可以大量节省内存占用，我们只操作了一次 DOM ，减少事件注册，提高程序的性能。
同时，当新增子元素时无需再次对其绑定（动态绑定事件）。

 <body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('事件委托弹窗');
            // e.target 可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>
</body>

事件委托注意事项

使用“事件委托”时，并不是说把事件委托给的元素越靠近顶层就越好。事件冒泡的过程也需要耗时，越靠近顶层，事件的“事件传播链”越长，也就越耗时。如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失。

本文作者：Acelet

本文链接：https://www.cnblogs.com/acelet/articles/17592190.html

posted @ 2023-07-30 22:08 Acelet 阅读(161) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

Acelet

rich world,poor you

阻止事件冒泡与事件代理(委托)详解

DOM事件流

阻止事件冒泡

事件代理(委托)

事件委托的概念

事件委托的作用

事件委托注意事项

公告

常用链接

最新随笔

我的标签

积分与排名

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	if(e && e.stopPropagation){
	e.stopPropagation();
	}else{
	window.event.cancelBubble = true;
	}

	<body>
	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	</ul>
	<script>
	// 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
	var ul = document.querySelector('ul');
	ul.addEventListener('click', function(e) {
	// alert('事件委托弹窗');
	// e.target 可以得到我们点击的对象
	e.target.style.backgroundColor = 'pink';
	})
	</script>
	</body>