target和currentTarget区别

e.target 用户点击的元素
e.currentTarget 开发者监听的元素
this是e.currentTarget，不建议使用
举例
div>span{文字}，用户点击文字
e.target就是span
e.currentTarget就是div

W3C事件原型

先捕获 后监听

  1. capture phase

from the Window to the target’s parent.

  1. target phase

event’s target

  1. bubble phase

starting with the target’s parent and ending with the Window

特例

只有一个div被监听（不考虑父子同时被监听）
fn分别在捕获阶段和冒泡阶段监听click事件
用户电机的元素就是开发者监听的

div.addEventListener(‘click’, f1) //bubble
div.addEventListener(‘click’, f1, true) //capture

结论： 谁先监听谁先执行

阻止冒泡

e.stopPropagation

propagation

  • n. （动植物等的）繁殖，增殖，；（观点、理论等的）传播；（运动、光线、声音等的）传送