HTML 事件(一) 事件的介绍

　　本篇主要介绍HTML中的事件知识：事件相关术语、DOM事件规范、事件对象。

其他事件文章

1. HTML 事件(一) 事件的介绍

2. HTML 事件(二) 事件的注册与注销

3. HTML 事件(三) 事件流、事件委托

4. HTML 事件(四) 模拟事件操作

目录

1. 事件相关术语：介绍事件相关的术语；如：事件类型、事件名称、事件目标等等。

2. DOM事件规范：介绍W3C目前定义的三种DOM事件规范：0、2、3级。

3. 事件类型：介绍了HTML目前的事件类型；如：UIEvent、FocusEvent、MouseEvent、WheelEvent、KeyboardEvent、CompositionEvent。

4. Event 事件对象：表示事件发生时的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等等。

1. 事件相关术语

事件可表示为动作。以鼠标为例，移动、点击、悬停都是一种动作，也是事件。

事件类型(event type)：表示事件的类型。如：MouseEvent(鼠标事件)、KeyboardEvent(键盘事件)。

事件名称(event name)：表示事件的名称。如：click(单击)、dblclick(双击)。

事件目标(event target)：表示与发生事件相关的目标对象。

事件处理程序(event handler)：指处理事件的函数，即发生事件时，需调用的函数。

事件对象(event object)：事件发生时，表事件的状态，比如事件发生的目标、键盘按键的状态、鼠标的位置、鼠标按钮的状态等等。事件触发时，通过参数传递给事件处理程序。

HTML元素中的事件处理程序属性名称是以"on"为前缀，紧跟着事件的名称。如：onclick、onload。

document.body.onclick = function (e) {
console.log('body的click事件');
};
document.getElementById('btn').onclick = function (e) {
console.log('btn的click事件');
e.stopPropagation(); // 阻止此事件后续的冒泡行为，原先点击此事件，会触发body的相同类型事件
};

方法详解

4.3 currentTarget 与 target 属性的区别

currentTarget ：获取正在处理此事件的对象。

target ：获取触发此事件的对象。

冒泡阶段时两者的区别： 假设body和Button元素都注册了click事件；当点击Button元素时，body的click事件也会触发，此时在body的click事件内，currentTarget指向body元素，target指向Button元素。

示例：点击Button元素时的显示结果

document.body.onclick = function (e) {
console.log(e.currentTarget); // 指向body元素
console.log(e.target); // 若是冒泡事件时，指向最开始触发的元素。否则为元素自身。
};

document.getElementById('btn').onclick = function (e) {
console.log(e.currentTarget);
console.log(e.target);
};

==================================系列文章==========================================

本篇文章：5.3 HTML 事件(一) 事件的介绍

Web开发之路系列文章