红色箭头代表捕获阶段

蓝色代表目标阶段

绿色代表冒泡阶段

调用元素对象的addEventListener()方法，参数：事件，回调函数，是否捕获（true代表捕获阶段，false代表冒泡阶段，ie浏览器不支持在捕获阶段绑定事件因此一般写false）

<body>

<button id="btn">点击</button>

<script type="text/javascript">

var btn=document.getElementById("btn");

var eventPhase=["捕获阶段","目标阶段","冒泡阶段"];

document.body.addEventListener("click",function(event){

    var index=event.eventPhase;

    alert("click处于"+eventPhase[index-1]);//捕获阶段 1

},true);

btn.addEventListener("click",function(event){

    var index=event.eventPhase;

    alert("click处于"+eventPhase[index-1]);//目标阶段 2

},true);

document.body.addEventListener("click",function(event){

    var index=event.eventPhase;

    alert("click处于"+eventPhase[index-1]);//冒泡阶段 3

});

</script>

</body>

在回调函数中，传递进来Event事件对象

获取Event对象的target属性，代表当前的元素对象

使用事件代理，给父节点绑定监听事件，可以提升性能，可以减少绑定给每个子节点

停止事件冒泡，调用Event对象的stopPropagation()方法，降低事件的复杂性

知乎：javascript的事件处理阶段问题?

在DOM 2中，事件流有三个阶段，事件捕获阶段，处于目标阶段和事件冒泡阶段。

var btn=document.getElementById("myBtn");

btn.onclick=function(){

alert("Clicked");

}

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

var btn=document.getElementById("myBtn");

btn.addEventListener("click",function(){

alert(this.id);

},false);

以这种方法添加的事件处理程序如果左后一个参数是true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序。

var btn=document.getElementById("myBtn");

btn.attachEvent("onclick",function(){

alert("Clicked");

});

以这种方法添加的事件处理程序都会被添加到冒泡阶段。

---------------------------------------------------------------------------------------------------------------

然后event对象都有一个属性eventPhase，表示调用事件处理程序的阶段，属性的值可以为1,2,3,

1. 表示捕获阶段

2. 表示“处于目标”

3. 表示冒泡阶段

问题一：当调用这个属性的时候输出的结果都是2，什么时候会出现其他的结果？

问题二：根据上面的3个例子事件处理程序的在哪个阶段被处理，那么eventPhase不就是它在哪个阶段被处理的结果？

问题三：不同阶段处理事件，会有什么不同？有具体的例子吗？

李力：

问题一：

document.body.addEventListener("click", function(event){

alert(event.eventPhase);  // 1  捕获阶段，document.body 上的事件处理程序

}, true);

myBtn.onclick = function(event){

alert(event.eventPhase);  // 2  目标上的事件处理程序

}

document.body.onclick = function(event){

alert(event.eventPhase);  // 3  冒泡阶段，document.body 上的事件处理程序

}

事件流说的是页面接收事件的顺序，而所谓的”冒泡“、”捕获“是相对于目标元素而言的。

问题二：

“尽管处于目标发生在冒泡阶段，但evenPhase仍然一直等于2”。——《JavaScript高级程序设计》。

我在看这部分的时候，觉得挺合理的。既然是目标元素的事件处理程序，当然得在处于目标阶段处理事件了啊。

具体为什么我也在找答案，求大神讲解。

[javascript] 看知乎学习js事件触发过程的更多相关文章

  1. [javascript] 看知乎学习js闭包

    知乎:到底什么是闭包? 寸志: JavaScript 闭包的本质源自两点,词法作用域和函数当作值传递. 词法作用域,就是,按照代码书写时的样子,内部函数可以访问函数外面的变量.引擎通过数据结构和算法表 ...

  2. js事件触发(一)

    今日和一位前端童鞋聊了下js触发事件的两种形式: 第一种在jsp/vm上做类似onClick=functionName()的触发:另一种是在js文件中增加对应节点的监听事件触发.前者页面掺杂了js的内 ...

  3. 学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象

    1.常用的事件: ① onload:页面加载 ② onblur: 失去焦点 onfocus: 获取焦点 ③ onclick:点击 ④ onmouseover:鼠标经过 onmouseout:鼠标离开 ...

  4. JavaScript学习——JS事件总结

    回顾之前已经使用过的事件 (onsubmit.onclick.onload.onfocus.onblur.onmouseover.onmouseout) onfocus/onblur:聚焦离焦事件,用 ...

  5. 《JavaScript权威指南》学习——js闭包

    序:闭包这个玩意啊~在很多没有代码块的语言中都会出现,已经成为大多程序员入门的一道坎,闭包让很多程序员觉得晦涩(事实上百度一下这个名词,真的说的很晦涩啊亲==|||),我第一次知道闭包这个名词是从&l ...

  6. [javaSE] 看知乎学习反射

    简单的来说,反射机制指的是程序在运行时能够获取自身的信息.在java中,只要给定类的名字,那么就可以通过反射机制来获得类的所有信息. 知乎:学习java应该如何理解反射?   余晖: 反射提供了一种运 ...

  7. [javaSE] 看知乎学习工厂模式

    factory的“本质”就是根据不同的输入创建出不同类型的对象. 引入factory的原因就是你需要根据不同的输入创建不同类型的对象. 简单工厂模式相当于是一个工厂中有各种产品,创建在一个类中,客户无 ...

  8. node.js事件触发

    var events = require('events'); var EventEmitter = events.EventEmitter(); //监听这个名为TestE事件 EventEmitt ...

  9. JavaScript初探 三 （学习js数组）

    JavaScript初探 (三) JavaScript数组 定义 创建数组 var 数组名 = [元素0,元素1,元素2,--] ; var arr = ["Huawei",&qu ...

随机推荐

  1. neo4j CQL 使用

    neo4j CQL 使用 1. create命令 CREATE (emp:Employee) #创建一个emp 员工标签 CREATE (dept:Dept) #部门标签 #Added 1 label ...

  2. 【转】C#如何创建泛型类T的实例

    原文地址:https://www.cnblogs.com/lxhbky/p/6020612.html 最近在学历基类的写法时,遇到了一个问题:如何怎么创建一个泛型类T的实例呢?     废话不多说了, ...

  3. Django 实现第三方账号登录网站

    这里我们使用 django-allauth 模块来实现第三方账号验证登录,官方文档如下:https://django-allauth.readthedocs.io/en/latest/ . 安装 dj ...

  4. 使用Flask+uwsgi+Nginx部署Flask正式环境

    环境准备 在开始正式讲解之前,我们将首先进行环境准备. Step1:安装Python,pip以及nginx: sudo apt-get update sudo apt-get install pyth ...

  5. 杀掉所有 skynet 进程

    ps aux | grep skynet | awk '/config/{print $2}' | xargs kill

  6. [vuejs] 终端npm run dev 不能自动打开浏览器运行项目解决办法

    终端执行: npm run dev 出现: I Your application is running here: http://localhost:8080 但并没有打开浏览器运行项目 解决办法: ...

  7. 转---30 分钟学会 Flex 布局

    正文从这开始- Flex 基本概念: 在 flex 容器中默认存在两条轴,水平主轴(main axis) 和垂直的交叉轴(cross axis),这是默认的设置,当然你可以通过修改使垂直方向变为主轴, ...

  8. C、C++打包成.dll .so .a 给Unity使用

    C.C++打包成.dll .so .a 给Unity使用 打包.dll库 工具:VS 使用VS新建项目 选择不大于.NET3.5的版本 选择Visual C++ -> Win32 控制台应用程序 ...

  9. Docker端口映射(六)

    一.容器端口映射 1.1. 外部访问容器 在启动容器时候,如果不指定参数,在容器外部是无法通过网络来访问容器内的服务的 当容器运行一些网络服务的时候,我们可以通过指定-p或者-P参数来实现能够让外部访 ...

  10. IIS 301重定向 报错 地址后面有eurl.axd

    错误发生的原因是当ASP.NET检测到Web站点配置为使用ASP.NET 4.0,本地ASP.NET 4.0 的组件会传递一个不能扩展的 URL到ASP.NET的管理程序作进一步处理.但是,如果一个低 ...