DOM事件模型

zzzicky
119 阅读2分钟

事件是用户或者浏览器自己执行的某种动作，是文档或者浏览器发生的一些交互瞬间，比如点击（click）按钮等，这里的click就是事件的名称。JS与html之间的交互是通过事件实现的，DOM支持大量的事件。

事件流

DOM是个树形结构，当我们在页面上单击一个按钮，页面上哪些元素会触发这个事件，是发生在这个按钮上，还是这个按钮的容器元素（我们说父元素）也会触发这个点击事件呢？ 这就牵扯到事件流，从上面的思考，我们知道它描述的是事件触发顺序，那上文中是按钮和其容器元素都触发吗，它们谁先触发呢？这可不是确定的，得看是哪种类型的事件流了。

1. 事件捕获

事件捕获是网景提出的，他们和IE 的截然相反。也就是说，从不具体的节点到最具体的节点，一般是从document对象开始传播，不过很少人用事件捕获的，还是事件冒泡用的多。

2. 事件冒泡

事件冒泡是IE 的事件流，事件是由最具体的元素接收，然后逐级向上传播，在每一级的节点上都会发生，直到传播到document对象，向Chrome这样的浏览器会冒泡到window 对象（很容易记忆，联想水里的泡泡不也这样么）。

3. DOM事件流

这里规定的事件流有三个阶段： 事件捕获阶段，目标阶段，事件冒泡阶段。

<div class = '爷爷'>
  <div class = '爸爸'>
    <div class = '儿子'>
    文本
    </div>
  </div>
</div>

添加监听事件为fnYe > fnBa > fnEr

点击文本，既点击了爷爷又点击了爸爸还点击了儿子

IE5调用顺序为fnEr->fnBa->fnYe

网景调用顺序为fnYe->fnBa->fnEr

W3C发布标准规定浏览器同时支持两种调用顺序

即事件捕获(网景):调用顺序为fnYe->fnBa->fnEr

事件冒泡(IE):调用顺序为fnEr->fnBa->fnYe

DOM事件模型示意图

image.png

事件绑定API:

  • IE5: .attachEvent('onclick', fn)//事件冒泡
  • 网景: .addEventListener('click', fn)//事件捕获
  • W3C: .addEventListener('click', fn, bool), 如果bool不传或为falsy, 则fn使用事件冒泡, 反之则fn使用事件捕获.
  • falsy值有: 0, "" " `` , null, undefined, NaN
  • 如果bool值为true,就让fn走捕获，意思是说，当浏览器在捕获阶段发现div有fn监听函数，就会调用fn, 提供事件信息
  • 注意的是：捕获和冒泡都会被执行，区别在于fn在哪个过程会被执行
  • 注意的是：IE的知识不需要特意去学，因为已经过时了，等需要用到的时候，再去搜索学习
avatar
文章
阅读
粉丝