DOM事件流

DOM 事件流

祖先级和子元素都绑定同一事件时，执行的顺序

事件流的三个阶段

• 第一个阶段：事件捕获
• 第二个阶段：事件执行过程（同一元素同时设置了捕获和冒泡时，按照书写顺序执行）
• 第三个阶段：事件冒泡
• addEventListener() 第三个参数为 false 时，事件冒泡，第三个参数为 true 时，事件捕获
• onclick 类型：只能进行事件冒泡过程，没有捕获阶段
• attachEvent() 方法：只能进行事件冒泡过程，没有捕获阶段

事件委托

• 利用事件冒泡，将子级的事件委托给父级加载
• 同时，需要利用事件函数的一个 e 参数，内部存储的是事件对象

事件对象e

• 只要触发事件，就会有一个对象，内部存储了与事件相关的数据。
• e 在低版本浏览器中有兼容问题，低版本浏览器使用的是 window.event
• 事件对象常用的属性：
  • e.eventPhase 查看事件触发时所处的阶段(1 表示捕获阶段，2 表示目标阶段（事件触发时触发事件的元素，并且是自身设置的事件），3 表示冒泡阶段)
  • e.target 用于获取触发事件的元素
  • e.srcElement 用于获取触发事件的元素，低版本浏览器使用
  • e.currentTarget 用于获取绑定事件的事件源元素(this指向的就是绑定事件的事件源元素，两者用法相同)
  • e.type 获取事件类型
  • e.clientX/e.clientY 所有浏览器都支持，鼠标距离浏览器窗口左上角的距离
  • e.pageX/e.pageY IE8 以前不支持，鼠标距离整个HTML页面左上顶点的距离（参考文档左上角）

事件对象的兼容

1. e = e || window.event;
   高级浏览器认识e 就返回e 的值，低版本浏览器不认识e 就会返回window.event 的值。
2. 获取触发事件的元素兼容写法
   var target = e.target || e.srcElement;

取消默认行为和阻止事件传播的方式

比如想让a标签不跳转，取消默认行为

• return false; 普通事件的阻止方式
• e.preventDefault() 取消默认行为
• e.returnValue 取消默认行为，低版本浏览器使用
  e.returnValue = false;

阻止冒泡

• e.stopPropagation(); 阻止冒泡，标准方式
• e.cancelBubble = true; 阻止冒泡，IE 低版本，标准中已废弃