如下图所示,我们有三个 div 元素。每个div都有一个与之关联的点击处理程序。处理程序执行以下任务:
Outer div click处理程序将 hello outer打印到控制台。
Inner div click处理程序将 hello inner 打印到控制台。
Innermost div click 处理程序将 hello innermost 打印到控制台。
编写一段代码来分配这些任务,以便在单击innermost div 时始终打印以下序列?
hello inner → hello innermost → hello outer
实现:事件流是先捕获再冒泡,捕获阶段是从最外层到目标,冒泡是从目标到最外层。所以按照打印的要求,outer最后打印,所以必须是在冒泡的时候最后触发,inner是在捕获阶段触发。而最内层的不管是捕获还是冒泡阶段都是可以的。
且:只有当 真正触发事件的DOM元素 是内层的时候,外层DOM元素才有机会模拟捕获事件是冒泡事件