09-JS的事件流的概念(重点)

 

在学习jQuery的事件之前，大家必须要对JS的事件有所了解。看下文

事件的概念

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

什么是事件流

事件流描述的是从页面中接收事件的顺序

1、DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：

① 事件捕获阶段；

② 处于目标阶段；

③ 事件冒泡阶段

那么其实呢，js中还有另外一种绑定事件的方式：看下面代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件流</title>

    <script>

    window.onload = function(){

        var oBtn = document.getElementById('btn');

        oBtn.addEventListener('click',function(){

            console.log('btn处于事件捕获阶段');

        }, true);

        oBtn.addEventListener('click',function(){

            console.log('btn处于事件冒泡阶段');

        }, false);

        document.addEventListener('click',function(){

            console.log('document处于事件捕获阶段');

        }, true);

        document.addEventListener('click',function(){

            console.log('document处于事件冒泡阶段');

        }, false);

        document.documentElement.addEventListener('click',function(){

            console.log('html处于事件捕获阶段');

        }, true);

        document.documentElement.addEventListener('click',function(){

            console.log('html处于事件冒泡阶段');

        }, false);

        document.body.addEventListener('click',function(){

            console.log('body处于事件捕获阶段');

        }, true);

        document.body.addEventListener('click',function(){

            console.log('body处于事件冒泡阶段');

        }, false);

    };

    </script>

</head>

<body>

    <a href="javascript:;" id="btn">按钮</a>

</body>

</html>

当我们点击这个btn的时候，看看页面都输出了什么：

在解释输出结果为什么是这样之前，还有几个知识点需要了解一下即可：

1、addEventListener

addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

2、document、documentElement和document.body三者之间的关系：

document代表的是整个html页面；

document.documentElement代表的是<html>标签；

document.body代表的是<body>标签；

接着我们就来聊聊上面的例子中输出的结果为什么是这样：

在标准的“DOM2级事件”中规定，事件流首先是经过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段。这里可以画个图示意一下:

首先在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，就是id为btn的a标签。

接着在事件冒泡过程中，事件开始时由最具体的元素（a标签）接收，然后逐级向上传播到较为不具体的节点（document）。

需要注意的点：由于老版本的浏览器不支持事件捕获，因此在实际开发中需要使用事件冒泡，在由特殊需要时再使用事件捕获

补充知识了解即可：

1、IE中的事件流只支持“事件冒泡”，但是版本到了IE9+以后，实现了“DOM2级事件”，也就是说IE9+以后也可以在捕获阶段对元素进行相应的操作。

2、在DOM事件流中，实际的目标在“捕获阶段”不会接收到事件。而是在“处于目标阶段”被触发，并在事件处理中被看成“冒泡阶段”的一部分。然后，“冒泡阶段”发生，事件又传播回文档。

jquery的常用事件

jquery常用的事件，大家一定要熟记在心

前端 ----js的事件流的概念（重要）的更多相关文章

  1. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  2. JS的事件流的概念(重点)

      09-JS的事件流的概念(重点)   在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件 ...

  3. JS的事件流的概念

    事件的概念: HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在 ...

  4. 08 JS的事件流的概念(重点)

    在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以 ...

  5. jQuery系列（九）：JS的事件流的概念

    1.事件概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在 ...

  6. 09-JS的事件流的概念(重点)

    在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以 ...

  7. 09-----JS事件流的概念（重点）

    在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 时间的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以 ...

  8. jQuery 事件流的概念

    jQuery  事件流的概念 什么是事件流 DOM事件流 1. 事件捕获阶段; 2.处于目标阶段; 3.事件冒泡阶段; <!DOCTYPE html> <html lang=&quo ...

  9. js的事件流理解

    面试问到js的事件流,当时说的不是很清楚,现在觉得有必要把这个弄清楚. 事件捕获和事件冒泡 事件流描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. 事件流主要分为两种,即事件捕获和事 ...

随机推荐

  1. windows server 禁用智能卡服务的步骤

    许多用户对于系统中的很多功能都不太了解,其中智能卡服务更是少有人知.智能卡服务就是对插入的智能卡进行管理和访问控制,大多数用户都无需使用此项功能.那么在Win7系统中要怎么取消智能卡服务呢? 1.首先 ...

  2. 032、学容器必须懂bridge网络（2019-02-19 周二）

    参考https://www.cnblogs.com/CloudMan6/p/7066851.html   docker安装时会创建一个名为 docker0 的linuxbridge.如果不指定 --n ...

  3. tomcat cluster配置实战注意事项

    关于tomcat cluster的实现原理,详见:https://tomcat.apache.org/tomcat-7.0-doc/cluster-howto.html#How_it_Works. 在 ...

  4. 错误 1 “Entities.PlanPrjEntity.PlanPrjs”不可访问，因为它受保护级别限制

    本人第一次是用List做父类,写了一个类PlanPrjs,如下: class PlanPrj { public int ID { get; set; } public string Name { ge ...

  5. MyBatis简单使用和入门理解

    本文记录第一次使用Mybatis时碰到的一些错误和简单理解,采用的示例是Eclipse中的JAVA工程,采用XML文件定义数据库连接. 可以使用Java JDBC API直接操作数据库,但使用框架会更 ...

  6. SQL 编程技巧

    Ø  简介 本文主要介绍编写 SQL 时的一些编程技巧,方便有时候忘了便于查看,主要包含以下内容: 1.   SQL 语句中使用 +=.-=.*=./= 运算符 2.   值为 NULL 的列或局部变 ...

  7. 【C++】 网络编程 01

    趁着计算机网络这门课布置了课程设计,学习下网络编程. 系统:Ubuntu 14.01... 1. 关于Socket(套接字) 1.1 套接字是存在于运输层和应用层间的抽象层,通过它来区分不同应用程序进 ...

  8. 【bzoj 1492】[NOI2007]货币兑换Cash

    Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和 B纪念券(以下简称B券).每个持有金券的顾客都有一个自己的帐户.金券的数目可以是一个实 ...

  9. Docker 容器文件导出 - 六

    Docker 容器 导入导出 导入:import 导出:export 打tar包导出容器 nginx1 的文件系统: # docker export nginx1 > nginx1.tar.gz ...

  10. Linux 下时间获取

    1.获得当天的日期 date +%Y-%m-%d 2.将当前日期赋值给DATE变量 DATE=$(date +%Y%m%d) 3.获取明天的日期 date -d next-day +%Y%m%d 4. ...