博客列表 >请简述 DOM 事件模型或 DOM 事件机制

请简述 DOM 事件模型或 DOM 事件机制

南瓜又个梦
南瓜又个梦原创
2021年06月30日 16:45:38479浏览
  1. <div class='gpapa'>
  2. <div class='papa'>
  3. <div>son</div>
  4. </div>
  5. </div>

捕获

超看有没有监听的顺序或者层次是从外面开始的
gpapa==>papa==>son
网景提出来的

冒泡

son==>papa==>gpapa
微软提出来的

顺序

绑定在被点击元素的事件是按照代码的顺序发生的,其他非绑定的元素则是通过冒泡或者捕获的触发。按照W3C的标准,先发生捕获事件,后发生冒泡事件。
所以事件的整体顺序是:
非目标元素捕获 -> 目标元素代码顺序 -> 非目标元素冒泡

事件绑定 API addEventListener

W3C:

  1. baba.addEventListener('click',fn,bool)

如果不传bool值 默认为false,冒泡

如果 bool 值为 true, 捕获

target 与 currentTarget 区别

e.target 用户操作的元素

e.currentTarget 程序员监听的元素

取消冒泡

捕获不能取消,冒泡可以 e.stopPropagation 中断冒泡

事件e

事件e会在事件结束后自动消亡
可以声明一个变量来保存当前事件信息,

捕获与冒泡如何并存

用两个事件分别存放,顺序执行就可以了

事件委托的好处

省监听内存
动态监听,可以监听暂时不存在的元素

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议