DOM 事件模型

时间:2021-1-8 作者:admin

事件是什么

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

DOM事件流

事件流又称为事件传播,描述的是从页面中接收事件的顺序。如下图所示,DOM 是个树形结构,我们在页面上点击一个元素,事件对象将通过 DOM 事件流确定的 DOM 树进行传播。

事件冒泡(Bubbling Phase)

事件冒泡是IE 的事件流,事件是由最具体的元素接收,然后逐级向上传播。这种由内向外的查找事件对象方式,叫事件冒泡 。

事件捕获(Capture Phase)

事件捕获是Netscape浏览器开发团队提出的与IE截然相反的做法。从不具体的节点到最具体的节点,从最顶层的元素开始查找,逐层往下找,这种由外向内的查找事件对象方式,叫事件捕获。

事件流

事件流有三个阶段: 事件捕获阶段,目标阶段,事件冒泡阶段。

目标阶段指的是活动对象到达事件对象的事件目标。如果事件类型指示事件不会冒泡,则该事件对象将在此阶段完成后停止。

开发者可以自由选择将事件对象放在捕获阶段还是冒泡阶段。

事件绑定

  • IE 5:element.attachEvent(‘onclick’, fn)// 冒泡

  • 网景:element.addEventListener(‘onclick’, fn)// 捕获

  • W3C:element.addEventListener(‘onclick’, fn, bool)

如果 bool 不传或为 falsy ,fn 就会走冒泡阶段。即当浏览器进入冒泡阶段发现 element 有 fn 监听函数,就会调用 fn 函数,并提供事件信息。

如果 bool 为 true ,fn 就会走捕获阶段。即当浏览器进入捕获阶段发现 element 有 fn 监听函数,就会调用 fn 函数,并提供事件信息。

target v.s currentTarget

e.target 是用户操作的元素

e.currentTarget 是程序员监听的元素

一个特例

当只有一个 div 被监听,fn 分别在捕获阶段和冒泡阶段监听 click 事件

div.addEventListener('click', f1)
div.addEventListener('click', f2, true)

此时,谁先监听就会先执行。

取消冒泡

捕获接断不可取消,但是冒泡阶段可以取消。我们通过 e.stopPropagation() 可以中断冒泡,浏览器不再向上走。一般用于封装某些独立的组件。

不可阻止默认动作

有些事件不能阻止默认动作。

以 scroll event 为例,看到 Bubbles 和 Cancelable。

  • Bubbles 为该事件是否冒泡,所有冒泡都可取消
  • Cancelable 为开发者是否可以阻止默认事件
  • scroll event不可阻止默认动作,但是可以通过阻止wheel和touchstart的默认动作,或者直接使用overflow:hidden来阻止滚动。因为先滚动才有滚动事件发生。

自定义事件

element.addEventListener('click', () => {
    const event = new CustomEvent('custom', {
        "detail": {name: "custom", age: 18}
    })
    element.dispatchEvent(event)
})
element.addEventListener('custom', (e) => {
    console.log('custom')
    console.log(e)
})

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。