事件

116 阅读1分钟

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

一、事件流

事件流描述了页面接受事件的顺序。

(一)事件冒泡

IE事件流被称为事件冒泡,这是因为事件被定义为从最具体的元素(文档树中最深的节点)开始触发,然后向上传播至没有那么具体的元素(文档)。

<!DOCTYPE html>
<html>
<head>
    <title>Event Bubbling Example</title>
</head>
<body>
    <div id="myDiv">Click Me</div>
</body>
</html>

在点击页面中的<div>元素后,click事件会以以下的顺序发生:

  1. <div>
  2. <body>
  3. <html>
  4. document

(二)事件捕获

Netscape Communicator团队提出了另一种名为事件捕获的事件流。事件捕获的意思是最不具体的节点应该最先收到事件,而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标前拦截时间。

如果用上面的例子使用事件捕获,那么点击<div>元素会以以下顺序触发click:

  1. document
  2. <html>
  3. <body>
  4. <div>

二、DOM事件流

DOM2Events规范规定事件流分为3个阶段:事件捕获、到达目标和事件冒泡。事件捕获最先发生,为提前拦截事件提供了可能。然后,实际的目标元素接收到事件。最后一个阶段是冒泡,最迟要在这个阶段影响事件。