jQuery  事件流的概念

什么是事件流

　　DOM事件流

　　1. 事件捕获阶段;

　　2.处于目标阶段;

　　3.事件冒泡阶段;

<!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>

　　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 事件流的概念的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. JS的事件流的概念

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

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

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

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

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

  9. jQuery事件流的顺序

    <div id="aaron"> <div id='test'> <ul> <p>点击p被委托,ul被阻止了,因为内部重写了事件对象 ...

随机推荐

  1. 新手学python-Day1-鸡汤,变量,编码,进制,判断

    作业要求为编写一个登录接口:`输入用户名密码`认证成功后显示欢迎信息`输错三次锁定做完作业以后,使用ctrl+alt+f格式化一下,特别舒爽 1 def jilu(str): 2 zt = open( ...

  2. C和C++ const的声明差异

    当在C源代码文件中将变量声明为const时,可以通过以下方式实现: const int i = 2; 然后,可以在另一个模块中使用此变量,如下表示: extern const int i; 但若要获取 ...

  3. [MongoDB实战]Part1 起步

    本书的这部分对MongoDB进行了一个大致的简介.包括了Javascript Shell和Ruby驱动,这俩都有例子 在第一章,我们将了解到MongoDB的历史,设计目的和实际使用的场景.我们还将了解 ...

  4. [SharePoint2010开发入门经典]12、SPS2010安全管理

    本章概要: 1.SPS中的用户授权 2.理解服务器场解决方案和沙箱解决方案的不同 3.理解表单验证和声明验证

  5. what we benefit from big data

    大数据玩的是什么,趋势,故障,寿命? 物联网拉动的是终端厂商的销量,作为终端设备生产商(OEM).无论是汽车.手机.家电行业.最有理由推动物联网的普及,可是作为传统行业,玩"网"并 ...

  6. Docker推出了Docker云，给大家介绍下哈！

    Docker推出了Docker云,给大家介绍下哈. 收到了Docker官网的邮件邀请,他们推出了Docker云:https://cloud.docker.com 账号信息栏目下有: 云提供商:眼下支持 ...

  7. MySQL具体解释（8）----------MySQL线程池总结(二)

    这篇文章是对上篇文章的一个补充,主要环绕下面两点展开.one-connection-per-thread的实现方式以及线程池中epoll的使用. one-connection-per-thread 依 ...

  8. Java学习之道:Java 导出EXCEL

    1.Apache POI简单介绍  Apache POI是Apache软件基金会的开放源代码函式库.POI提供API给Java程式对Microsoft Office格式档案读和写的功能. .NET的开 ...

  9. BZOJ 2435: [Noi2011]道路修建 dfs搜图

    2435: [Noi2011]道路修建 Description 在 W 星球上有 n 个国家.为了各自国家的经济发展,他们决定在各个国家之间建设双向道路使得国家之间连通.但是每个国家的国王都很吝啬,他 ...

  10. 0x28 IDA*

    一个早上做完了我真牛B 就是A*用于DFS啊,现在我才发现迭代加深真是个好东西. poj3460 %了%了我们的目标是把它的顺序变对,那么第i个位置的值+1是要等于第i+1个位置的值的.对于一个操作, ...