DOM事件模型

嗨慢走
147 阅读3分钟

DOM事件模型

DOM 的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接

主要提供三个实例方法

  • addEventListener：绑定事件的监听函数
  • removeEventListener：移除事件的监听函数
  • dispatchEvent：触发事件

事件模型

一个事件发生后，会在子元素及父元素之间进行传播（propagation），这种传播分为三个阶段

    1. 由外向内找监听函，叫事件捕获
    2. 在目标节点触发事件
    3. 由内而外找监听函数，叫事件冒泡

通俗一点来说就是一个事件被触发时，浏览器会自动从用户操作标签外的最上级标签逐渐向里检查是否有相同事件，如果有则触发，如果没有则继续向下检查知道用户操作的标签，这过程称为捕获（捕获过程中有相同的监听的事件函数则执行）,直到捕获到触发目标执行目标事件，然后向上检查直到最上级元素为止，此过程称为冒泡 （有监听函数就执行，并提供事件信息，没有就跳过）

DOM事件传播的三个阶段：捕获阶段，目标阶段，冒泡阶段

1642172962034.png

事件绑定API

 IE5*:node.attachEvent('onclick',fn) //冒泡
 网景：node.addEventListener('click',fn)//捕获
 W3C: node。addEventListener('click',fn,bool)//
 如果bool不传或为falsy
 默认fn走冒泡，即当浏览器在冒泡阶段发现node有fn监听函数，就会调用fn，并提供事件信息
 如果为true
 就让fn走捕获，即当浏览器在捕获阶段发现node有fn监听函数，就会调用fn，并提供事件信息

1642173635039.png

代码示例

1642173766906.png

1642173797542.png

小结

  • 捕获与冒泡

     捕获说先调用爸爸的监听函数
 冒泡说先调用儿子的监听函数

  • W3C事件模型

     先捕获（先找爸爸=> 儿子）在冒泡（在儿子=>爸爸）
 注意e对象被传给所有监听函数
 事件结束后，e对象就不存在

取消冒泡

 捕获不可以取消，但冒泡可以
 e，stopPropagation()可中断冒泡，浏览器不在像上走

target vs currentTatget

 区别
 e.target:用户操作的元素
 e.currentTarget: 程序员监听的元素
 举例
 div>span(文字)，用户点击文字
 e.target就是span
 e.currentTarget就是div

不可阻止默认动作

 有些事件不能阻止默认动作
 MDN搜索scrollevent，看到Bubbles和Cancelable
 Bubbles的意思是该事件是否冒泡，所有冒泡都可以取消
 Cancelable的意思是开发者是否可以阻止默然事件
 Cancelable与冒泡无关

如何阻止滚动

 scroll事件不可以阻止默认动作
 阻止scroll默认动作没用，以为有滚动才有滚动事件
 要阻止滚动，可以阻止wheel和touchstart的默认动作
 注意需要找准备滚动条所载的元素
 但是滚动条还能用，可用css让滚动条width:0
 css也行
 使用overflow:hidden可以直接取消滚动条
 但此时JS依然可以修改scrollTop

小结

 target和currentTarget
 一个是用户点击，一个是开发者监听
 取消冒泡
 e.stopPropagation()
 事件的特性
 Bubbles表示是否冒泡
 Cancelable表示是否支持开发者取消冒泡
 如scroll不支持取消冒泡
 如何禁用滚动
 取消特定元素的wheel和touchstart的默认动作

自定义事件示例

avatar
文章
阅读
粉丝