【DOM】 标准事件流 / 事件机制

2021-02-03  本文已影响0人  Adder

什么是捕获,什么是冒泡;是先捕获还是先冒泡?

  <div class="A">
    <div class="B">
      <div class="C">
        Click Me
      </div>
    </div>
  </div>

捕获

捕获是从A -> B -> C;看有没有函数监听
由网景公司提出的:事件有父元素传递到子元素的过程就叫捕获

冒泡

冒泡是从C -> B -> A;看有没有函数监听
由微软提出的:事件由子元素传递到父元素传递的过程,叫做冒泡

两者的顺序

W3C标准:首先捕获,再冒泡
绑定在C的事件是按照代码的顺序发生的,其他非C元素则是通过冒泡或者捕获的触发。按照W3C的标准,先发生捕获事件,后发生冒泡事件。
所以事件的整体顺序是:
A元素捕获 -> B元素捕获 -> C元素代码顺序 -> B元素冒泡 -> A元素冒泡

事件绑定 addEventListener('click', fn, boolean)

第三个布尔值:默认false为冒泡,true为捕获

e.target 和e.currentTarget区别

target为 用户操作的元素
currentTarget 监听的元素

事件的取消

捕获不能取消,冒泡可以阻止 e.stopPropagation

事件委托

事件委托就是把事件监听放在祖先元素(如父元素、爷爷元素)上。
好处是:1 节约监听数量 2 可以监听动态生成的元素。

上一篇下一篇

猜你喜欢

热点阅读