[javascript] 看知乎学习js事件触发过程
红色箭头代表捕获阶段
蓝色代表目标阶段
绿色代表冒泡阶段
调用元素对象的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事件触发过程的更多相关文章
- [javascript] 看知乎学习js闭包
知乎:到底什么是闭包? 寸志: JavaScript 闭包的本质源自两点,词法作用域和函数当作值传递. 词法作用域,就是,按照代码书写时的样子,内部函数可以访问函数外面的变量.引擎通过数据结构和算法表 ...
- js事件触发(一)
今日和一位前端童鞋聊了下js触发事件的两种形式: 第一种在jsp/vm上做类似onClick=functionName()的触发:另一种是在js文件中增加对应节点的监听事件触发.前者页面掺杂了js的内 ...
- 学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象
1.常用的事件: ① onload:页面加载 ② onblur: 失去焦点 onfocus: 获取焦点 ③ onclick:点击 ④ onmouseover:鼠标经过 onmouseout:鼠标离开 ...
- JavaScript学习——JS事件总结
回顾之前已经使用过的事件 (onsubmit.onclick.onload.onfocus.onblur.onmouseover.onmouseout) onfocus/onblur:聚焦离焦事件,用 ...
- 《JavaScript权威指南》学习——js闭包
序:闭包这个玩意啊~在很多没有代码块的语言中都会出现,已经成为大多程序员入门的一道坎,闭包让很多程序员觉得晦涩(事实上百度一下这个名词,真的说的很晦涩啊亲==|||),我第一次知道闭包这个名词是从&l ...
- [javaSE] 看知乎学习反射
简单的来说,反射机制指的是程序在运行时能够获取自身的信息.在java中,只要给定类的名字,那么就可以通过反射机制来获得类的所有信息. 知乎:学习java应该如何理解反射? 余晖: 反射提供了一种运 ...
- [javaSE] 看知乎学习工厂模式
factory的“本质”就是根据不同的输入创建出不同类型的对象. 引入factory的原因就是你需要根据不同的输入创建不同类型的对象. 简单工厂模式相当于是一个工厂中有各种产品,创建在一个类中,客户无 ...
- node.js事件触发
var events = require('events'); var EventEmitter = events.EventEmitter(); //监听这个名为TestE事件 EventEmitt ...
- JavaScript初探 三 （学习js数组）
JavaScript初探 (三) JavaScript数组 定义 创建数组 var 数组名 = [元素0,元素1,元素2,--] ; var arr = ["Huawei",&qu ...
随机推荐
- bootstrap基础学习（四）——网格系统（列的偏移、排序、嵌套）
网格系统——列偏移.列排序.列嵌套 列偏移:有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来.这个时候就可以使用列偏移(offset)功能来实现.使用列偏移也非 ...
- [C#]Dapper学习笔记
1.安装,直接用nuget搜索Dapper就行,不过只支持框架4.5.1 2.数据库测试表 CREATE TABLE [dbo].[Student]( [ID] [bigint] NULL, ) NU ...
- C#后台代码获取程序集资源文件
资源会被打包在程序集内部. 选择这种生成方式后,该资源文件会被嵌入到该应用的程序集中,就是说打开生成的应用程序目录是看不到这个文件的. 可以用相对于当前的XAML文件的相对Uri访问,<Imag ...
- skynet inject address file.lua
inject d test/inject_fuck.lua -- d 是服务的 handle 拿 simpledb.lua 举例,修改如下 local skynet = require "s ...
- 从工程化角度讨论如何快速构建可靠React组件
前言 React 的开发也已经有2年时间了,先从QQ的家校群,转成做互动直播,主要是花样直播这一块.切换过来的时候,业务非常繁忙,接手过来的业务比较凌乱,也没有任何组件复用可言. 为了提高开发效率,去 ...
- activemq在一台服务器上启动多个Broker
步骤如下: 1.把整个conf文件夹复制一份,比如叫conf2 2.修改里面的activemq.xml文件 ①brokerName不能和原来的重复 ②数据存放的文件名称不能重复,比如<kahaD ...
- Swift 里 Set（一）辅助类型
_UnsafeBitset  是一个固定大小的 bitmap,用来确定指定位置是否有元素存在. HashTable  具体的 hash 碰撞算法在HashTable里实现,目前使用的是简单的开放地 ...
- ss的使用配置（电脑、手机FQ）
注:FQ仅用于google查阅资料等,禁止违规违法行为 自己搭建ss服务 1.vps购买:https://www.alpharacks.com/holiday 按流程填完相关信息(Operating ...
- Python小白学习之路（二十四）—【装饰器】
装饰器 一.装饰器的本质 装饰器的本质就是函数,功能就是为其他函数添加附加功能. 利用装饰器给其他函数添加附加功能时的原则: 1.不能修改被修饰函数的源代码 2.不能修改被修饰函数的调用 ...
- 关于SVM（support vector machine）----支持向量机的一个故事
一.预告篇: 很久很久以前,有个SVM, 然后,……………………被deep learning 杀死了…………………………………… . 完结……撒花 二.正式篇 好吧,关于支持向量机有一个故事 ,故事是 ...