<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会在事件结束后自动消亡
可以声明一个变量来保存当前事件信息,
捕获与冒泡如何并存
用两个事件分别存放,顺序执行就可以了
事件委托的好处
省监听内存
动态监听,可以监听暂时不存在的元素