如何彻底理解并掌握JavaScript中的事件流机制？

本文共计1344个文字，预计阅读时间需要6分钟。

目录：DOM事件流 + 事件冒泡 + 事件捕获 + 情景一：直接在HTML中绑定事件 + 情景二：[domNode].onclick() 方式（DOM0级） + 情景三：[domNode].addEventListener() 方式（DOM2级） + 总结 + 明确事件流，首先我们要了解事件流

目录

• DOM事件流
• 事件冒泡
• 事件捕获
• 情景一：直接在HTML中绑定事件
• 情景二：[domNode].onclick()方式——DOM0级
• 情景三：[domNode].addEventListener()方式——DOM2级
• 总结

DOM事件流

要明白事件流，首先我们要明白三点：

• 元素不是独立的，是串联在一起的
• 单个元素触发事件以后还会影响其他元素
• 事件流的方式：事件捕获(网景提出)、事件冒泡(IE提出)

我们就以上图为例，假设你给div绑定了点击事件，当你点击了div后，其他元素也会受之牵连，会引起牵一发而动全身的效果。