事件传播机制


html演示看“1-html-事件传播”

1. 概念:

所谓事件传播有两种,捕获和冒泡

捕获是从外到内

冒泡是从内到外(默认模式)

2. 事件传播的三个阶段:

dom标准事件流包括三个阶段:
事件捕获阶段、处于目标阶段、事件冒泡阶段

事件对象e.eventPhase属性有其三个阶段值
1(事件捕获阶段)
2(处于目标阶段)
3(冒泡阶段)

3. 事件监听和捕获、冒泡的关系

监听只是监听而已

不管是冒泡事件的监听也好,捕获事件监听也好

冒泡捕获都会执行一个完整的顺序

这个循序是捕获的外到内=》冒泡的内到外

所以目标对象不论设置什么样的监听毛都会触发一个完整的事件传播

监听只是监听而已

4. 阻止事件传播

e.stopPropagation()

捕获、冒泡

5. 取消默认事件

e.preventDefault()

a标签href会打开新页面等行为

6. return false

  • 这只在jQuery有用

函数 return false 语句执行以下步骤:

首先,取消默认事件

阻止事件传播

7. 事件委托(event delegation)

事件委托,也称为事件代理,是指将本要添加在自身的事件,添加到别人身上.

通过事件传播(冒泡,捕获)的原理,将事件添加到父级,以事件对象target操作目标节点。

从而达到减少事件绑定,节约性能开支的目的

还有一个比较实用的应用就是,对后续JS动态添加的节点进行操作

当然jQuery的写法比较方便,参考 ‘JS-原生JS怎么获取动态dom.md’

<ul id="emoji">
  <li>😁</li>
  <li>😂</li>
</ul>

<script>
//捕获
  emoji.addEventListener('click', function (e) {
        console.log('div1事件捕获', e.target.innerHTML);
 }, true)
</script>

8. 在Vue中如何操作事件传播

(1) Vue提供了元素的事件绑定
(2) Vue提供了了修饰符,可以事件为捕获,阻止传播等,如stop停止传播事件,capture监听捕获

注意

(1)并非所有的事件都会传播,像 focus,blur 事件就不传播,mouseenter 和 mouseleave 事件也不会传播;
(2)为避免内存泄漏问题,请记住在不再使用处理程序时将其删除。


文章作者: iamfugui
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 iamfugui !
评论
  目录