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. 混合app开发--js和webview之间的交互总结

    使用场景:原生APP内嵌套H5页面,app使用的是webview框架进行嵌套 这样就存在两种情况 1.原生app调用H5的方法 2.H5调用app的方法 分别讲解下,其实app与H5之间的交互式非常简 ...

  2. 细说REST API安全之防止数据篡改

    通常可以使用MD5或SHA-1对API参数进行签名,在服务器端通过校验签名结果来验证数据是否被修改. 举个例子:添加用户 地址:http://192.168.0.10/v1/user/add?sign ...

  3. 酷狗.kgtemp文件加密算法逆向

    该帖转载于孤心浪子--http://www.cnblogs.com/KMBlog/p/6877752.html 酷狗音乐上的一些歌曲是不能免费下载的,然而用户仍然可以离线试听,这说明有缓存文件,并且极 ...

  4. 26. SpringBoot 初识缓存及 SimpleCacheConfiguration源码解析

    1.引入一下starter: web.cache.Mybatis.MySQL @MapperScan("com.everjiankang.cache.dao") @SpringBo ...

  5. linux修改主机名,关闭图形化界面,绑定ip地址,修改ip地址

    1关闭图形化界面 vi /etc/inittab 改成id:3:initdefault: 注意:不要选0或6 2.修改主机名 vi /etc/sysconfig/network 修改即可 3,修改ip ...

  6. Spring整合redis配置文件详解

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  7. dbms_redefinition在线重定义表结构 可以在表分区的时候使用

    dbms_redefinition在线重定义表结构 (2013-08-29 22:52:58) 转载▼ 标签: dbms_redefinition 非分区表转换成分区表 王显伟 在线重定义表结构 在线 ...

  8. Docker 扩容 容器空间大小 - 九

    Docker 扩容: 提前规划 : 一是从宿主机 配置磁盘格式 LVM 宿主机可以动态扩展: 二是 在容器上的扩容:默认是 100G .然后创建容器时候 挂载目录 或者直接池扩展: 默认 Docker ...

  9. Eclipse下生成/编辑Java类图或时序图（UML）[转载]

    一 引用文章 1.[eclipse下生成Java类图和时序图,生成UML图(更完整版)](https://blog.csdn.net/guomainet309/article/details/5302 ...

  10. tab选项卡在鼠标经过时实现切换延迟

    偶然间在浏览网页时,发现这样的效果.当鼠标不经意间滑过tab时并不会切换,当鼠标停留在上面一段时候后才会切换. 个人觉得用户体验不错,优点是1.当用户只是滑过标签,并不需要切换,而此时如果切换标签需要 ...