一起来学习一下JavaScript的事件流

目录
  • 1. 什么是事件流 ？
  • 2. 事件流模型
    • 2.1) 事件冒泡
    • 2.2) 事件捕获
  • 3. DOM 事件流
  • 总结

1. 什么是事件流 ？

在学习事件流之前我们先看看什么是事件 ？

事件代表文档或浏览器窗口中某个有意义的时刻

即用户与页面的交互动作

（如用户点击元素时，鼠标移动到某个元素上等等）

事件的作用

JavaScript 与 HTML 的交互就是通过事件实现的

那么事件流是什么呢 ？

页面接受事件的顺序

2. 事件流模型

2.1) 事件冒泡

事件被定义为从最具体的元素（DOM 树的叶子）开始触发，然后向上传播至没有那么具体的元素（DOM 树的根节点）

通过一个例子理解一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡</title>
</head>
<body>
    <div>点击</div>
</body>
</html>

当点击 <div> 元素后，会触发 click 事件；

然后 click 事件沿 DOM 树一路向上，在经过的结点依次触发，直至 document；

即 <div> —> <body> —> <html> —> document

可以通过下图来理解一下：

2.2) 事件捕获

从最不具体的节点（DOM 树的根节点）最先收到事件，而最具体的节点（DOM 树的叶子 ）应该最后收到事件

通过一个例子来理解一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件捕获</title>
</head>
<body>
    <div>点击</div>
</body>
</html>

在点击 <div> 后， click 事件首先由 document 捕获；

然后沿 DOM 树一路向下传播，直至达到目标元素 <div>；

即 document —> <html> —> <body> —> <div>

通过下图来理解一下：

根据它的特点，它有着如下作用：

在事件达到最终目标前拦截事件

Tips:

由于一些旧版本浏览器不支持事件捕获，通常建议使用事件冒泡。

3. DOM 事件流

DOM2 Events 规定事件流分为 3 个阶段：

事件捕获、达到目标和事件冒泡。

事件捕获最先发生，为提前拦截事件提供了可能，然后实际的目标元素接受到了事件，最后事件冒泡（最迟要在这个阶段响应事件）

通过一个例子理解一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 事件流</title>
</head>
<body>
    <div>点击</div>
</body>
</html>

点击<div> 元素后，以如下图所示的顺序触发事件

在 DOM 事件流中，实际的目标元素在捕获阶段不会接收到事件（捕获阶段从 document 到 <body> 就结束了）。

  • 捕获阶段： document —> <html> —> <body> 即图中的 1, 2, 3；
  • 达到目标：即在 <div> 上触发事件，即图中的 4 （通常在事件处理时，被认为是冒泡阶段的一部分）；
  • 冒泡阶段：<body> —> <html> —> document 即图中的 5, 6, 7；

Tips:

虽然 DOM2 Events 规范明确捕获阶段不命中目标事件，但现代浏览器都会在捕获阶段在事件目标上触发事件。所以，在事件目标上有两个机会来处理事件。

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • 学习JavaScript事件流和事件处理程序

    本文全篇介绍了JavaScript事件流和事件处理程序,分享给大家供大家参考,具体内容如下 一.事件流 事件流描述的是从页面中接收事件的顺序.IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕获流. 二.事件冒泡 即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点.如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

  • 详解JavaScript 事件流

    事件 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在什么时候进行调用的,就需要了解一下"事件流"的概念. 事件流 事件流描述的就是从页面中接收事件的顺序.而早期的IE和Netscape提出了完全相反的事件流概念,IE事件流是事件冒泡,而Netscape的事件流就是事件捕获. 事件流类别 事件冒泡 即从下至上,从目标触发的元素逐级向上传播,直到win

  • JavaScript 事件流、事件处理程序及事件对象总结

    JS与HTML之间的交互通过事件实现.事件就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合.本文将介绍JS事件相关的基础知识. 一.事件流 事件流描述的是从页面中接受事件的顺序. 事件冒泡 事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的结点(文档).以下面HTML页面为例,如果你点击了页面中的按钮,那么"

  • Javascript 事件流和事件绑定

    Javascript 事件流和事件绑定

    事件流 浏览器中的事件流意味着页面上可有不仅一个,甚至多个元素响应同一个事件.而这一个或多个元素响应事件发生的先后顺序在各个浏览器(主要针对IE和Netscape)上是不同的. 冒泡型事件(Dubbed Bubbling) IE上的解决方案就是冒泡型事件(Dubbed Bubbling).冒泡型事件的基本思想是,事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. 示例(1):点击我触发冒泡型事件流 示例(1)的XHTML代码结构:<span id="cnt0

  • JavaScript的事件流你了解吗

    JavaScript的事件流你了解吗

    目录 1. 什么是事件流 ? 2. 事件流模型 2.1) 事件冒泡 2.2) 事件捕获 3. DOM 事件流 总结 1. 什么是事件流 ? 在学习事件流之前我们先看看什么是事件 ? 事件代表文档或浏览器窗口中某个有意义的时刻 即用户与页面的交互动作(如用户点击元素时,鼠标移动到某个元素上等等) 事件的作用 JavaScript 与 HTML 的交互就是通过事件实现的 那么事件流是什么呢 ? 页面接受事件的顺序 2. 事件流模型 2.1) 事件冒泡 事件被定义为从最具体的元素(DOM 树的叶子)开

  • JS事件流与事件处理程序实例分析

    本文实例讲述了JS事件流与事件处理程序.分享给大家供大家参考,具体如下: 1.事件流:从页面中接收事件的顺序 1.1 IE :事件冒泡流 1.2 Netscape :事件捕获 1.3 DOM事件流 :事件捕获阶段--事件目标阶段--事件冒泡阶段 DOM2级事件规定 :捕获阶段不会涉及目标事件. 2.事件处理程序 事件 :用户或者浏览器自身执行的 某种动作 事件处理程序 :响应某个事件的 函数 . 2.1 HTML事件处理程序 用一个与该事件处理程序同名的HTML特性来指定. 2.1.1包含要执行

  • 一起来学习一下JavaScript的事件流

    一起来学习一下JavaScript的事件流

    目录 1. 什么是事件流 ? 2. 事件流模型 2.1) 事件冒泡 2.2) 事件捕获 3. DOM 事件流 总结 1. 什么是事件流 ? 在学习事件流之前我们先看看什么是事件 ? 事件代表文档或浏览器窗口中某个有意义的时刻 即用户与页面的交互动作 (如用户点击元素时,鼠标移动到某个元素上等等) 事件的作用 JavaScript 与 HTML 的交互就是通过事件实现的 那么事件流是什么呢 ? 页面接受事件的顺序 2. 事件流模型 2.1) 事件冒泡 事件被定义为从最具体的元素(DOM 树的叶子)

  • 带你彻底搞懂JavaScript的事件流

    带你彻底搞懂JavaScript的事件流

    目录 DOM事件流 事件冒泡 事件捕获 情景一:直接在HTML中绑定事件 情景二:[domNode].onclick()方式——DOM0级 情景三:[domNode].addEventListener()方式——DOM2级 总结 DOM事件流 要明白事件流,首先我们要明白三点: 元素不是独立的,是串联在一起的 单个元素触发事件以后还会影响其他元素 事件流的方式:事件捕获(网景提出).事件冒泡(IE提出) 我们就以上图为例,假设你给div绑定了点击事件,当你点击了div后,其他元素也会受之牵连,会

  • JavaScript事件学习小结（一）事件流

    JavaScript事件学习小结（一）事件流

    相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 http://www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 http://www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员(属性和方法) http://www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 http://www

  • JavaScript事件学习小结(二)js事件处理程序

    JavaScript事件学习小结(二)js事件处理程序

    相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 http://www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 http://www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员(属性和方法) http://www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 http://www

  • 详解JavaScript中的事件流和事件处理程序

    事件流:分两种,IE的是 事件冒泡流 ,事件开始时从最具体的元素接收,逐级向上传播到较为不具体的节点(Element -> Document).与之相反的是 Netscape 的 事件捕获流 . DOM2级事件规定事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段. 大多数情况下都是将事件处理程序添加到事件流的冒泡阶段.一个 EventUtil 的栗子: var EventUtil = { addHandler: function(element, type, handler){ if

  • javascript下对于事件、事件流、事件触发的顺序随便说说

    javascript下对于事件、事件流、事件触发的顺序随便说说

    1.首先我们来了解几个概念,"事件","事件流","事件名称","事件处理函数/事件监听函数,也许是"老生常谈",知道的朋友可以越过. 事件: 事件是用户自身或浏览器进行的特定行为.如:用户点击 也就是常用的click事件 事件流:多个事件 按一定顺序触发 形成了事件流 事件名称:如上面所讲的click就是事件名 事件处理函数/事件监听函数(Dom的叫法)就是 事件触发后的处理函数,如obj.onclick=fn;函

随机推荐