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

 

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

事件的概念

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

什么是事件流

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

1、DOM事件流

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

① 事件捕获阶段；

② 处于目标阶段；

③ 事件冒泡阶段

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件流</title>
  6.     <script>
  7.  
  8.     window.onload = function(){
  9.  
  10.         var oBtn = document.getElementById('btn');
  11.  
  12.         oBtn.addEventListener('click',function(){
  13.             console.log('btn处于事件捕获阶段');
  14.         }, true);
  15.         oBtn.addEventListener('click',function(){
  16.             console.log('btn处于事件冒泡阶段');
  17.         }, false);
  18.  
  19.         document.addEventListener('click',function(){
  20.             console.log('document处于事件捕获阶段');
  21.         }, true);
  22.         document.addEventListener('click',function(){
  23.             console.log('document处于事件冒泡阶段');
  24.         }, false);
  25.  
  26.         document.documentElement.addEventListener('click',function(){
  27.             console.log('html处于事件捕获阶段');
  28.         }, true);
  29.         document.documentElement.addEventListener('click',function(){
  30.             console.log('html处于事件冒泡阶段');
  31.         }, false);
  32.  
  33.         document.body.addEventListener('click',function(){
  34.             console.log('body处于事件捕获阶段');
  35.         }, true);
  36.         document.body.addEventListener('click',function(){
  37.             console.log('body处于事件冒泡阶段');
  38.         }, false);
  39.  
  40.     };
  41.  
  42.     </script>
  43. </head>
  44. <body>
  45.     <a href="javascript:;" id="btn">按钮</a>
  46. </body>
  47. </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. 08 JS的事件流的概念(重点)

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

  3. 前端 ----js的事件流的概念（重要）

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

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

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

  5. JS的事件流的概念

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

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

    1.事件概念 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. confluence6.3.1部署+数据迁移

    目录: 环境准备 搭建方法 数据迁移 搭建过程中的bug 1,confluence部署 1.1,环境准备 Java:jdk1.8 mysql: 数据库编码规则选择utf8 -- UTF-8 Unico ...

  2. Linux（Centos7）下搭建SVN服务器

    操作系统: CentOS 7.6 64位 第一步:通过yum命令安装svnserve,命令如下: 检测svn是否安装: rpm -qa subversion #检查现有版本,如果输入命令后没有提示的话 ...

  3. [综] meanshift算法

    Meanshift,聚类算法 http://www.cnblogs.com/liqizhou/archive/2012/05/12/2497220.html 记得刚读研究生的时候,学习的第一个算法就是 ...

  4. Ubuntu更新时提示错误 E: Sub-process /usr/bin/dpkg returned an error code (1)

    $ sudo su //root权限 $ sudo mv /var/lib/dpkg/info /var/lib/dpkg/info_old //现将info文件夹更名 $ sudo mkdir /v ...

  5. Delphi操作Ini文件

    Delphi提供了一个TInifile类,使我们可以非常灵活的处理INI文件 一．INI文件的结构[小节名]ini文件       关键字1＝值1       关键子2＝值2INI文件允许有多个小节, ...

  6. Cglib源码分析 invoke和invokeSuper的差别(转)

    原文 https://blog.csdn.net/makecontral/article/details/79593732 Cglib的实例 本文重在源码的分析,Cglib的使用不再复述. //被代理 ...

  7. public class PageRender implements ResponseRender

    package cn.ubibi.jettyboot.demotest.controller.render; import cn.ubibi.jettyboot.framework.commons.S ...

  8. cookies的常见方式

    cookie有如下特点 保存在客户端,一般由浏览器负责存储在本地. 通常是加密存储的,不过由于存储在本地,很难保证数据不被非法访问,并不怎么安全,所以cookies中不宜保存敏感信息,如密码等. 哪些 ...

  9. 【HDFS API编程】开发环境搭建

    使用HDFS API的方式来操作HDFS文件系统 IDEA Java 使用Maven来管理项目 先打开IDEA,New Project 创建GAV然后next 默认使用的有idea内置的Maven,可 ...

  10. 学习笔记：jqueryui

    Jquery UI cdn.bootcss.com <!-- jquery --> <script src="http://cdn.bootcss.com/jquery/1 ...