DOM事件模型

·  阅读 32

事件是用户或者浏览器自己执行的某种动作,是文档或者浏览器发生的一些交互瞬间,比如点击(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走捕获,意思是说,当浏览器在捕获阶段发现divfn监听函数,就会调用fn, 提供事件信息
  • 注意的是:捕获和冒泡都会被执行,区别在于fn在哪个过程会被执行
  • 注意的是:IE的知识不需要特意去学,因为已经过时了,等需要用到的时候,再去搜索学习
分类:
前端
标签: