捕获与冒泡
.爷爷.爸爸.儿子 文字 给三个div分别添加事件监听 fnYe fnBa fnEr
点击文字的时候事件执行顺序 IE认为应该最先调用fnEr 网景认为先调用fnYeW3C统一
首先按照 爷爷 爸爸 儿子 的顺序看看有没有函数监听
然后按照 儿子 爸爸 爷爷 的顺序看看有没有函数监听
有监听函数就调用 并提供事件信息 没有就跳过术语
从外向内找监听函数,叫事件捕获
从内向外找监听函数,叫事件冒泡
W3C事件模型
- addEventListener
事件绑定API
IE5:baba.attachEvent(‘onclick’,fn)冒泡
网景:baba.addEventListener(‘click’,fn)捕获
W3C:baba.addEventListener(‘click’,fn,bool)
这个bool不传或者为falsy
就让 fn走冒泡,即当浏览器在冒泡阶段发现baba有fn监听函数,就会调用fn,并提供事件信息
如果bool为true
就让fn走捕获,即当浏览器在捕获阶段发现baba有fn监听函数,就会调用fn,并提供事件信息 - 儿子被点击了,算不算点击了老子 算
那么先调用老子的函数还是先调用儿子的函数 看你把函数绑定在捕获还是冒泡阶段 - 捕获与冒泡
捕获说先调用爸爸的监听函数
冒泡说先调用儿子的监听函数 - W3C事件模型
先捕获(先爸爸 儿子)再冒泡(再儿子 爸爸)
浏览器先捕获再冒泡 不管你写的顺序是怎样的
target 和 currentTarget
e.target 用户操作的元素
e.currentTarget 程序员监听的元素
取消冒泡
- 捕获不可取消 但冒泡可以
e.stopPropagation()可中断冒泡 浏览器不再往上走
通俗来说:有人打我 我自己解决 别告诉我老子
一般用于封装某些独立的组件
不可阻止默认动作
- 有些事件不能阻止默认动作
scroll event MDN
bubbles:该事件是否冒泡
Cancelable:开发者是否可以阻止默认事件
注意
scroll事件不可阻止默认动作