JavaScript - 事件2

事件目标

当事件触发的时候，那个 准确触发事件的元素
当给一个元素绑定事件以后：
在该元素身上触发行为，是可以触发事件处理函数的
在该元素的后代元素身上触发行为，也是可以触发事件处理函数的

获取事件目标：
标准浏览器：事件对象,target
IE 低版本：事件对象.sreElement
注意：mouseenter 和 mouseleave

事件传播

概念：当用户在浏览器内触发指定行为的时候，会按照元素的 结构父级 向上传递该事件行为
从事件目标开始，传递到window为止
事件目标 > body > html > document > window

事件传播机制

在事件传播的过程中, 任何浏览器都只能在一个阶段触发事件
在 IE 低版本内, 只能在冒泡阶段触发事件, 不能在捕获阶段触发事件
在其他所有浏览器内, 默认在冒泡阶段触发事件, 保留了在捕获阶段触发事件的能力

在标准浏览器下, 如何进行事件捕获阶段触发的行为
DOM 0级 事件, 是没有办法的
只有 addEventListener 是可以可以修改触发阶段的
第三个参数表示 冒泡阶段触发 还是 捕获阶段触发
默认值: false, 表示 冒泡阶段触发
选填值: true, 表示 捕获阶段触发

阻止事件传播

• 标准浏览器
  事件对象.stopPropagation()
• IE 低版本
  事件对象.cancelBubble = true

事件委托

• 循环绑定事件
  缺点:
  给太多的元素绑定了事件, DOM 性能的浪费
  对于动态操作的元素不太友好

• 事件委托
  优点:
  只给一个元素绑定了一次事件
  对于动态操作的元素友好
  核心:
  a元素的事件, 绑定给 a 元素的结构父级
  在结构父级的事件内, 通过 事件目标 判断你确实触发的是 a元素

this 和 e.target
如果你用的是循环绑定事件, this 表示当前这个元素
如果你用的是事件委托, e.target 表示当前这个元素