事件的概念

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 的常用事件

JS的事件流概念*******的更多相关文章

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

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

  2. js的事件流理解

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

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

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

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

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

  5. JS的事件流的概念

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

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

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

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

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

  8. JS Event事件流（冒泡机制、捕获机制、事件绑定）

    1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...

  9. js的事件流事件机制

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

随机推荐

  1. iOS 在Xcode中使用OpenSSL库

    最近要做一个密码键盘,想内置一些加密算法,所以就想到了添加OpenSSL库,现在mac也自带了OpenSSL库,但是每次都从终端是生成是很麻烦的.网上找了很多文档.博客去介绍如何编译可以在Xcode中 ...

  2. python的安全插件

    1.PyFuzz (0.1.3)                                                         - Simple fuzz testing for u ...

  3. 两段用来启动/重启Linux下Tomcat的Perl脚本

    两段代码,第二段比较好些. 下面是Split输出结果方式的代码: #!/usr/local/bin/perl #Date:2015-07-07 print "Begin to restart ...

  4. ie下div模拟的表格，表头表体无法对齐

    现象:ie下,如果某个区域滚动显示表格内容(div模拟的table),表体出现滚动条的时候,会跟表头无法对齐. 解决方法:1.首先需要知道两个高度:表体最大高度height1.目前表体要显示的内容高度 ...

  5. linux 安装jdk和tomcat

    安装jdk 下载相关jdk .rpm包,如:jdk-8u31-linux-i586.rpm 解压:#rpm -ivh jdk-8u31-linux-i586.rpm 配置环境变量:#vi  /etc/ ...

  6. Python数据结构：列表、元组和字典

    在Python中有三种内建的数据结构——列表list.元组tuple和字典dict 列表中的项目包括在方括号中,项目之间用逗号分割 元组和列表十分类似,只不过元组和字符串一样是不可变的 即你不能修改元 ...

  7. frame框架及其实例

    框架概念 : 谓框架便是网页画面分成几个框窗,同时取得多个 URL.只需要 <FRAMESET> <FRAME> 即可,面所有框架标记需要放在一个总起的 html 档,这个档案 ...

  8. 如何修改mindmanager默认字体为微软雅黑

    mindmanager默认的字体是Verdana的,如何改为大家喜欢的其他字体呢?比如微软雅黑. 其实很简单,以我使用的是汉化版Mindmanager2012为例,只需要下面几个步骤   第1步:找到 ...

  9. 在SAE安装原版WORDPRESS（图文讲解）

    wordpress下载:https://cn.wordpress.org/ 在Sina App Engine上搭建WordPress博客图文教程: 一.登录你的SAE账号以后.进入"我的应用 ...

  10. ORCAD中的一些操作小技巧

    1.ORCAD中改变元器件和文本字体颜色的命令: 打开在 View -> Toolbar -> Command Window.然后圈选文字(可复选),然后到 Command Window ...