导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

介绍

• 描述从页面中接收事件的顺序， 冒泡， 捕获
• IE 提出的 事件冒泡流 （Event Bubbling）
• Netscape 提出的 事件捕获流 （Event Capturing）

⭐️ 事件流有三个阶段

• 事件捕获阶段
• 处于目标阶段 - 代码按先后顺序执行（新版chrome先捕获后冒泡）
• 事件冒泡阶段

⭐️ DOM分级

• DOM 0
  • onclick = ""
  • ele.onclick = function() {}
  • onmouseover
  • onXXX
• DOM 1
  • 没有定义事件模型
• DOM 2
  • addEventListener(3个参数) -> W3C规范
  • removeEventListener

三个级别没有重要之分，可以看成不同时期定义的新的使用方案

事件对象

不同浏览器区别

target、srcElement 事件源对象

• FF火狐只有 target
• IE 只有 srcElement
• Chrome 两者兼有

⭐️ 兼容性

wrapper.onclick = function(e) {
  var target = e.target || e.srcElement;
	console.log(e);
}