事件的传播

事件的传播

+ 当你在一个元素上触发行为的时候
=> 会按照 结构父级 的顺序向上传播 行为
=> 直到 window 为止
+ 问题1:
=> 当我点击 inner 的时候, 给从 inner 到 window 的所有都绑定一个点击事件
=> 会不会都触发
+ 问题2:
=> 当我点击在 inner 的时候, inner 自己没有事件处理函数
=> 结构父级上的事件处理函数会不会触发 ?
+ 问题3:
=> 当我点击在 outer 的时候, inner 和 center 的事件会不会触发
+ 问题4:
=> 当我点击 other 的时候, inner 的事件会不会触发 ? 不会
=> 当我点击 other 的时候, center 的事件会不会触发 ? 不会
=> 当我点击 other 的时候, outer 的事件会不会触发 ? 不会
=> 当我点击 other 的时候, body 的事件会不会触发 ? 会
+ 问题5:
=> 当我在 inner 身上触发一个移入事件的时候
=> 会不会触发 center 的点击事件 ?
=> 只能触发同类型事件
+ 定义:
=> 当事件触发的时候, 会按照结构父级的顺序向上传递同类型事件
=> 事件对象里面有一个信息叫做 path, 表示当前事件传播的路径

事件的目标冒泡和捕获
1. 目标
=> 准确触发事件的那个元素
=> 当你给 center 绑定一个点击事件
-> 你点击 inner 会触发
-> 你点击 center 也会触发
-> 两次事件触发的元素是不一样的
=> 在事件对象里面有一个属性叫做 target
-> 表示本次事件触发的时候, 准确触发的元素
-> 我们叫做事件目标
=> 特点: IE 低版本不支持
-> IE 低版本使用 srcElement
=> 处理兼容
-> var target = e.target || e.srcElement

2. 冒泡
=> 按照 从 目标 到 window 的顺序来执行所有的事件

3. 捕获
=> 按照 从 window 到 目标 的顺序来执行所有的事件

4. addEvenetListener() 的第三个参数
-> 默认是 false, 表示冒泡
-> 可以选太难 true, 表示捕获