DOM 事件机制

197 阅读1分钟

DOM事件捕获与冒泡

事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。

示意图:

image.png

事件冒泡

事件冒泡可以形象的比喻打开一瓶汽水,气泡会从最底下一直冒出。也就是说事件会从最内层的元素发生,一直向上传播

从图中可以出看出事件冒泡的顺序是

graph TD
td --> tr --> tbody --> table --> body --> html --> Document --> Window

事件捕获

事件捕获则与冒泡相反,事件会从最外层开始发生,直到最具体的元素

从图中可以出看出事件冒泡的顺序是

graph TD
Window --> Document --> html --> body --> table --> tbody --> tr --> td

什么是事件监听

从外向内找监听函数,叫事件捕获

什么是事件监听

从内向外找监听函数,叫事件冒泡

先捕获还是先冒泡?

首先元素会执行捕获事件,然后才会执行冒泡事件。但是开发者可以先决定放在捕获阶段还是冒泡阶段

addEventListener

事件绑定API

  • IE5*:baba.attachEvent('onclick',fn) //冒泡
  • 网景:baba.addEventListener('click',fn) //捕获
  • W3C:baba.addEventListener('click',fn,bool)

如果bool不传或为Falsy

就让fn走冒泡,即当浏览器再冒泡阶段发现baba有fn监听函数,就会调用fn,并提供事件信息

如果bool为true

就让fn走捕获,即当浏览器再捕获发现baba有fn监听函数。就会调用fn,并提供事件信息

可以选择把fn放哪边

image.png