事件对象
event 对象暴露哪些通用成员?
| 成员 | 含义 |
|---|---|
type | 事件类型 |
target | 引起事件的元素 |
currentTarget | 当前处理事件的元素 |
eventPhase | 阶段: 1 捕获, 2 到达目标, 3 冒泡 |
bubbles | 是否冒泡 |
cancelable | 是否可取消默认行为 |
defaultPrevented | 是否已调用 preventDefault() |
preventDefault() | 阻止默认动作 |
stopPropagation() | 阻止事件继续传播 |
stopImmediatePropagation() | 阻止传播并阻止同类型后续处理程序 |
composed | 是否能穿过 Shadow DOM 边界 |
timeStamp | 事件创建时间戳 |
isTrusted | 是否由用户操作触发 |
target、currentTarget 与 this 有什么区别?
target: 引起事件的元素;currentTarget: 正在处理该事件的元素, 即处理程序注册的位置;this: 在处理程序内始终等于currentTarget;
document.body.onclick = function (event) {
console.log(event.currentTarget === document.body); // true
console.log(this === document.body); // true
console.log(event.target === document.getElementById("myBtn")); // true; 事件来自按钮并冒泡到 body
};
- 用途: 事件委托依赖
target判断真实来源, 见 事件委托与自定义事件;