【必须掌握】js中的事件（看javascript高级编程第四版的记录）

事件

JavaScript 与 HTML 的交互是通过事件实现的，事件代表文档或浏览器窗口中某个有意义的时刻。

---

1.事件流（掌握）

事件流模拟了事件接收的顺序。IE 和 Netscape 开发团队提出了几乎完全相
反的事件流方案。IE 将支持事件冒泡流，而 Netscape Communicator将支持事件捕获流。

1.1 事件冒泡 （理解、使用）

从最具体的元素（文档中最深的节点）开始触发，然后向上传播到没有那么具体的元素（文档）。
例如：

Click Me

点击页面的 div 元素后，click事件会以如下顺序发生：

1).

2).

3).

4). document

如图：

IE5.5及早期版本会跳过
元素（从 直接到 document ）。现代浏览器中的事件会一直冒泡到 window 对象。

1.2 事件捕捉（了解）

**事件捕获的意思是最不具体的节
点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标
前拦截事件**。

如果前面的例子使用事件捕获，则点击

元素会以下列顺序触发click 事件：

(1) document

(2)

(3)

(4)

**由于旧版本浏览器不支持，因此实际当中几乎不会使用事件捕获。通常建议使用事件冒泡，特殊情
况下可以使用事件捕获。**

1.3 Dom事件流 (掌握)

DOM2 Events 规范规定事件流分为 3 个阶段：事件捕捉、达到目标、事件冒泡。

第一步：事件捕捉最先发生，为提前拦截事件提供可能。第二部：实际的目标元素接收到事件。第三步：最后一个阶段是冒泡，最迟要在这个阶段响应事件。以上面那个 HTML 为例：点击

元素会以如下图 所示的顺序触发事件。

==**在 DOM 事件流中，实际的目标（

元素）在捕获阶段不会接收到事件。这是因为捕获阶段从
document 到 再到 就结束了。**== 下一阶段，即会在

元素上触发事件的“到达目标”
阶段，通常在事件处理时被认为是冒泡阶段的一部分（稍后讨论）。然后，冒泡阶段开始，事件反向传
播至文档。

大多数支持 DOM事件流的浏览器实现了一个小小的拓展。虽然 DOM2 Events规范明确捕获阶段不
命中事件目标，==**但现代浏览器都会在捕获阶段在事件目标上触发事件。最终结果是在事件目标上有两个
机会来处理事件。**==

注意：注意 所有现代浏览器都支持 DOM事件流，只有 IE8 及更早版本不支持。

2.事件处理程序

事件意味着用户或浏览器执行的某种动作。比如，单击（ click ）、加载（ load ）、鼠标悬停
（ mouseover ）。为响应事件而调用的函数被称为事件处理程序（或事件监听器）。事件处理程序的名字
以 "on" 开头，因此 click 事件的处理程序叫作 onclick ，而 load 事件的处理程序叫作 onload 。有
很多方式可以指定事件处理程序。

2.1 HTML事件处理程序（了解）

特定元素支持的每个事件的代码都可以像 HTML 属性一样的写法。此时属性
的值必须是能够执行的 JavaScript 代码。
例如：

注意：因为属性的值是 JavaScript 代码，所以必须要先经过转义 HTML 语法字符才能使用，比如和号（ & ）、双引号（ " ）、小于号（ < ）和大于号（ > ）。

• 在 HTML 中定义的事件处理程序可以调用在页面其他地方定义的脚本：

• 作为事件处理程序执行的代码可以访问全局作用域中的一切。

以这种方式指定的事件处理程序,首先，会创建一个函数来封装属性的值。这个
函数有一个特殊的局部变量 event ，其中保存的就是 event 对象

• 在下面这个函数中， this 值相当于事件的目标元素：

• **这个动态创建的函数的用域链被扩展了。在这个函数中，

document 和元素自身的成员都可以被当成局部变量来访问**

这意味着事件处理程序可以更方便地访问自己的属性。
例如：
```


```
如果这个元素是一个表单输入框，则作用域链中还会包含表单元素，事件处理程序对应的函数等价
于如下这样：

```html




```

在 HTML 中指定事件处理程序有一些问题:

• 时机问题

  有可能 HTML 元素已经显示
  在页面上，用户都与其交互了，而事件处理程序的代码还无法执行，这样就会发生错误，

  解决方法：
  
  大多数 HTML 事件处理程序会封装在 try / catch 块中，
  以便在这种情况下静默失败，如下面的例子所示：

• 浏览器兼容问题

  对事件处理程序作用域链的扩展在不同浏览器中可能导致不同的结果

• 使用 HTML 指定事件处理程序的最后一个问题是 HTML 与 JavaScript 强耦合

所以：==**很多开发者不使用 HTML
事件处理程序，而使用 JavaScript 指定事件处理程序**==

2.2 DOM0事件处理程序（掌握）

在 JavaScript 中指定事件处理程序的传统方式是把一个函数赋值给（DOM 元素的）一个事件处理程
序属性。
写法如下：

let btn = document.getElementById("myBtn");
btn.onclick = function() {
    console.log("Clicked");
};

事件处理程
序会在元素的作用域中运行，即 this 等于元素。下面的例子演示了使用 this 引用元素本身：

let btn = document.getElementById("myBtn");
btn.onclick = function() {
    console.log(this.id); // "myBtn"
};

**以这种方式添加事件处理程序是注册在事件流的
冒泡阶段的。**

通过将事件处理程序属性的值设置为 null ，可以移除通过 DOM0 方式添加的事件处理程序，如下
面的例子所示：

btn.onclick = null; 
// 把事件处理程序设置为 null ，再点击按钮就不会执行任何操作了。

**注意：如果事件处理程序是在 HTML 中指定的，则 onclick 属性的值是一个包装相应
HTML 事件处理程序属性值的函数。这些事件处理程序也可以通过在 JavaScript 中将相应
属性设置为 null 来移除。**

2.3 DOM2事件处理程序（掌握）

DOM2 Events 为事件处理程序的赋值和移除定义了两个方法：addEventListener() 和 removeEventListener(),这两个方法暴露在所有 DOM 节点上，他们接收3个参数：事件名、事件处理函数和一个布尔值，true 表示在捕获阶段调用事件处理函数，false（默认值）表示在冒泡阶段调用事件处理程序
例如：

let btn = document.getElementById("myBtn");
btn.addEventListener("click", () => {
    console.log(this.id);
}, false);

使用 DOM2
方式的主要优势是可以为同一个事件添加多个事件处理程序:

let btn = document.getElementById("myBtn");
btn.addEventListener("click", () => {
    console.log(this.id);
}, false);
btn.addEventListener("click", () => {
    console.log("Hello world!");
}, false);

多个事件处理程序以添加顺序来触发，因此前面的代码会先
打印元素 ID，然后显示消息“Hello world!”。

==通过 addEventListener() 添加的事件处理程序只能使用 removeEventListener() 并传入与添
加时同样的参数来移除。这意味着使用 addEventListener() 添加的匿名函数无法移除==

大多数情况下，事件处理程序会被添加到事件流的冒泡阶段，主要原因是跨浏览器兼容性好。把事
件处理程序注册到捕获阶段通常用于在事件到达其指定目标之前拦截事件。如果不需要拦截，则不要使
用事件捕获。

2.4 IE事件处理程序（了解）

IE 实现了与 DOM 类似的方法，即 attachEvent() 和 detachEvent() 。这两个方法接收两个同样
的参数：事件处理程序的名字和事件处理函数。因为 IE8 及更早版本只支持事件冒泡，所以使用
attachEvent() 添加的事件处理程序会添加到冒泡阶段。详情参考 （红宝书第四版497页）

2.5 跨浏览器事件处理程序（了解）

自己编写跨浏览
器事件处理代码也很简单，主要依赖能力检测。要确保事件处理代码具有最大兼容性，只需要让代码在
冒泡阶段运行即可。详情可参考 （红宝书第四版498页）

3. 事件对象

在 DOM 中发生事件时，所有相关信息都会被收集并存储在一个名为 event 的对象中。这个对象包
含了一些基本信息，比如导致事件的元素、发生的事件类型，以及可能与特定事件相关的任何其他数据。
例如，鼠标操作导致的事件会生成鼠标位置信息，而键盘操作导致的事件会生成与被按下的键有关的信
息。所有浏览器都支持这个 event 对象，尽管支持方式不同。

3.1 DOM对象事件（理解）

在 DOM 合规的浏览器中，event 对象是传给事件处理函数的唯一参数。不管以哪种方式（DOM0或者DOM2）指定事件处理程序，都会传入这个 event 对象。
下面的例子展示了在两种方式下都可以使
用事件对象：

let btn = document.getElementById("myBtn");
btn.onclick = function(event) {
    console.log(event.type); // "click"
};
btn.addEventListener("click", (event) => {
    console.log(event.type); // "click"
}, false);

在通过 HTML 属性指定的事件处理程序中，同样可以使用变量 event 引用事件对象。例如：

如前所述，事件对象包含与特定事件相关的属性和方法。不同的事件生成的事件对象也会包含不同
的属性和方法。不过，所有事件对象都会包含下表列出的这些公共属性和方法。（本文只列举了下面几个公共属性，更多公共参数具体可参考《红宝书第四版500页》）

属性/方法	类 型	读/写	说明
bubbles	布尔值	只读	表示事件是否冒泡
currentTarget	元素	只读	当前事件处理程序所在的元素
eventPhase	整数	只读	表示调用事件处理程序的阶段：1代表捕获阶段，2代表到达目标，3代表冒泡阶段
stopPropagation()	函数	只读	用于取消所有后续事件捕获或事件冒泡。只有 bubbles为 true 才可以调用这个方法
target	元素	只读	事件目标
type	字符串	只读	被触发的事件类型

在事件处理程序内部， this 对象始终等于 currentTarget 的值，而 target 只包含事件的实际
目标。如果事件处理程序直接添加在了意图的目标，则 this 、 currentTarget 和 target 的值是一样
的。下面的例子展示了这两个属性都等于 this 的情形：

let btn = document.getElementById("myBtn");
btn.onclick = function(event) {
    console.log(event.currentTarget === this); // true
    console.log(event.target === this); // true
};

如果这个事件处理程序是添加到按钮的父节点（如 document.body ）上，
那么它们的值就不一样了。例如：

document.body.onclick = function(event) {
    console.log(event.currentTarget === document.body); // true
    console.log(this === document.body); // true
    console.log(event.target === document.getElementById("div"));     // true
    console.log(event.currentTarget === event.target)
};

**这种情况下点击按钮， ==this== 和 ==currentTarget== 都等于 document.body ，这是因为==它是注册事件
处理程序的元素==。==而 target 属性等于按钮本身，这是因为那才是 click 事件真正的目标, target 属性等于触发事件的文档中最深的节点==。由于按钮
本身并没有注册事件处理程序，因此 click 事件冒泡到 document.body ，从而触发了在它上面注册的
处理程序。**

type 属性在一个处理程序处理多个事件时很有用。比如下面的处理程序中就使用了 event.type ：

let btn = document.getElementById("myBtn");
let handler = function(event) {
    switch(event.type) {
        case "click":
            console.log("Clicked");
        break;
        case "mouseover":
            event.target.style.backgroundColor = "red";
        break;
        case "mouseout":
            event.target.style.backgroundColor = "";
        break;
    }
};
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

注意：event 对象只在事件处理程序执行期间存在，一旦执行完毕，就会被销毁。

3.2 IE事件对象（了解）

与 DOM 事件对象不同， IE 事件对象可以基于事件处理程序被指定的方式以不同方式来访问。

• **如果

事件处理程序是使用 DOM0 方式指定的，则 event 对象只是 window 对象的一个属性**

• **如果是使用 HTML属性方式指定的事件处理程序，则 event 对象同样可以通过变量 event 访问（与

DOM 模型一样）**。

详情请参考（红宝书第四版502页）

3.3 跨浏览器事件（了解）

本文简约只是简约的描述，具体可参考（红宝书第四版505页）


虽然 DOM 和 IE 的事件对象并不相同，但它们有足够的相似性可以实现跨浏览器方案。

DOM事件对象中包含 IE 事件对象的所有信息和能力，只是形式不同。这些共性可让两种事件模型之间的映射成
为可能。

var EventUtil = {
    addHandler: function(element, type, handler) {
    // 为节省版面，删除了之前的代码。具体的代码可参考(红宝书498页)
    },
    getEvent: function(event) {
        return event ? event : window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    removeHandler: function(element, type, handler) {
        // 为节省版面，删除了之前的代码。具体的代码可参考(红宝书498页)
    },
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

下
面是使用 EventUtil 中这个方法统一获取 event 对象的一个例子：

btn.onclick = function(event) {
    event = EventUtil.getEvent(event);
};

4. 事件类型(掌握)

DOM3 Events定义了如下事件类型。

• 用户界面事件（ UIEvent ）：涉及与 BOM交互的通用浏览器事件。
• 焦点事件（ FocusEvent ）：在元素获得和失去焦点时触发。
• 鼠标事件（ MouseEvent ）：使用鼠标在页面上执行某些操作时触发。
• 滚轮事件（ WheelEvent ）：使用鼠标滚轮（或类似设备）时触发。
• 输入事件（ InputEvent ）：向文档中输入文本时触发。
• 键盘事件（ KeyboardEvent ）：使用键盘在页面上执行某些操作时触发。
• 合成事件（ CompositionEvent ）：在使用某种 IME（Input Method Editor，输入法编辑器）输入

字符时触发。

4.1 用户界面事件（掌握）

==**重点：知道了 img 元素可以触发 load 事件、error 事件。
知道了 resize 事件、scroll事件在不同浏览器中的差异，以及处理方法**==

用户界面事件或 UI 事件不一定跟用户操作有关。这类事件在 DOM 规范出现之前就已经以某种形
式存在了，保留它们是为了向后兼容。UI 事件主要有以下几种。

• DOMActivate：元素被用户通过鼠标或键盘操作激活时触发（比 click 或 keydown 更通用）。

这个事件在 DOM3 Events 中已经废弃。因为浏览器实现之间存在差异，所以不要使用它。

• load ：在 window 上当页面加载完成后触发，在窗套（ ）上当所有窗格（ ）

都加载完成后触发，在 元素上当图片加载完成后触发，在