请简述 DOM 事件模型或 DOM 事件机制
16lz
2021-07-01
<div class='gpapa'>
<div class='papa'>
<div>son</div>
</div>
</div>
捕获
超看有没有监听的顺序或者层次是从外面开始的
gpapa==>papa==>son
网景提出来的
冒泡
son==>papa==>gpapa
微软提出来的
顺序
绑定在被点击元素的事件是按照代码的顺序发生的,其他非绑定的元素则是通过冒泡或者捕获的触发。按照W3C的标准,先发生捕获事件,后发生冒泡事件。
所以事件的整体顺序是:
非目标元素捕获 -> 目标元素代码顺序 -> 非目标元素冒泡
事件绑定 API addEventListener
W3C:
baba.addEventListener('click',fn,bool)
如果不传bool值 默认为false,冒泡
如果 bool 值为 true, 捕获
target 与 currentTarget 区别
e.target 用户操作的元素
e.currentTarget 程序员监听的元素
取消冒泡
捕获不能取消,冒泡可以 e.stopPropagation 中断冒泡
事件e
事件e会在事件结束后自动消亡
可以声明一个变量来保存当前事件信息,
捕获与冒泡如何并存
用两个事件分别存放,顺序执行就可以了
事件委托的好处
省监听内存
动态监听,可以监听暂时不存在的元素
更多相关文章
- 简述事件委托(事件代理)
- 微信小程序数据操作、自定义事件、微信API、路由组件、变量作用
- PHP:【微信小程序】微信小程序数据交互,微信小程序判断/循环,微信
- 触屏事件-上下左右滑动
- 常见的事件
- 给文本注册单击事件不起作用问题记录
- PHP:oop->重载之set/get/call/callStatic,oop事件委托,数据库查询
- Android粗浅系统学习(适合入门)
- 02-Vue_事件修饰符