event事件传播规则
参考原文:https://my.oschina.net/u/1454562/blog/205010
event事件传播有三个阶段:捕获阶段、目标阶段、冒泡阶段
target.addEventListener(type, listener[, options]);
true表示该元素在事件的“捕获阶段”(由外往内传递时)响应事件;
false表示该元素在事件的“冒泡阶段”(由内向外传递时)响应时间。
html代码:
<div id='d'>
<p id='p'>
<span id='s'>Click Me!</span>
</p>
</div>
js代码:
var div = document.getElementById('d');
var p = document.getElementById('p');
var span = document.getElementById('s');
function onClickFn(event) {
var tagName = event.currentTarget.tagName;
var phase = event.eventPhase;
console.log(tagName, phase);
}
div.addEventListener('click', onClickFn, true);
p.addEventListener('click', onClickFn, true);
span.addEventListener('click',function(){
console.log('span')
},true)
如果true:
如果为false:
event事件传播规则的更多相关文章
- JS 传播事件、取消事件默认行为、阻止事件传播
1.事件处理程序的返回值 通常情况下,返回值false就是告诉浏览器不要执行这个事件相关的默认操作.例如,表单提交按钮的onclick事件处理程序能通过返回false阻止浏览器提交表单,再如a标签的o ...
- Event事件
妙味课堂-Event事件 1.焦点:当一个元素有焦点的时候,那么他就可以接受用户的输入(不是所有元素都能接受焦点) 给元素设置焦点的方式: 1.点击 2.tab 3.js 2.(例子:输入框提示文字) ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- spring发布和接收定制的事件(spring事件传播)
spring发布和接收定制的事件(spring事件传播) 2012-12-26 20:05 22111人阅读 评论(2) 收藏 举报 分类: 开源技术(如Struts/spring/Hibernat ...
- javascript 事件传播与事件冒泡,W3C事件模型
说实话笔者在才工作的时候就听说了什么"事件冒泡",弄了很久才弄个大概,当时理解意思是子级dom元素和父级dom元素都绑定了相同类型的事件,这时如果子级事件触发了父级也会触发,然后这 ...
- event事件:
onabort: 图像的加载被中断onblur: 元素失去焦点onchange: 域的内容被改变onclick: 当用户点击某个对象时调用的事件句柄ondblclick: 当用户双击某个对象时调用的事 ...
- Event事件详解
首先提到event,先要明白event的产生,也要先明白焦点,什么是焦点.焦点 : 使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 我们可以通过一些方式给元素设置 ...
- event 事件1
1.事件流 1.1 事件冒泡 IE8- 浏览器支持的事件流是事件冒泡.事件冒泡是事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)的过程. <!doctype html&g ...
- 【js】event(事件对象)详解
1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...
随机推荐
- Python 第三方库 进度条模块 tqdm的使用方法
使用方法一: tqdm tqdm(list)方法可以传入任意一种list,比如数组,同时tqdm中不仅仅可以传入list, 同时可以传入所有带len方法的可迭代对象,这里只以list对象为例: fro ...
- HPU 第三次积分赛:阶乘之和(水题)
阶乘之和 描述 对于整数pp,给出以下定义 p=x_{1}!+x_{2}!+x_{3}!+...+x_{q}!(x_{i}<x_{j}for\ all\ i<j )p=x1!+x2!+ ...
- js 时间操作积累
console.log( new Date() ); //Tue Mar 20 2018 22:47:01 GMT+0800 (中国标准时间) // var date = new Date( '201 ...
- 【java编程】java对象copy
实现java对象Copy的三种方式 一.克隆 implements Cloneable 二.序列化 implements Serializable 三.利用反射机制copy apache的BeanUt ...
- Javascript 正则验证带 + 号的邮箱地址
很多邮箱地址是可以加上 + 加号为同一个邮箱地址. 比如 Gmail. 如果需要验证带 + 号的邮箱,如下: str = "65485+55@gmail.com"; documen ...
- FastAdmin 开发第二天:安装环境
FastAdmin 开发前需要准备好开发环境,我是推荐是使用命令行安装. 运行环境 phpstudy 前期可以使用这类一键包环境,以后自己学着搭建. 后端工具 composer php包管理工具 前端 ...
- task optimization之superglue分析
开启logging (例子F:\wamp\www\git_repos\GitHub\GeneralUtility\superglue-master\examples\src\logging.cpp) ...
- spring答题
ioc 依赖注入:通过注入的方式实例化对象,不再直接new对象了,交给spring容器进行管理和维护 控制反转:实例化对象的控制权交给了spring容器,而不再是某个单独的类,控制权发生了变更 作用: ...
- 无人驾驶之激光雷达&摄像头(主要from 速腾CEO 邱纯鑫分享)
无人驾驶之激光雷达&摄像头 (from 速腾CEO 邱纯鑫公开课分享) 根据听的一些讲座和看的书籍,个人感觉:目前现在的自动驾驶,根本问题还是在于感知(路况,周边物体,交通标识等等),控制的方 ...
- LOJ 121 「离线可过」动态图连通性——LCT维护删除时间最大生成树 / 线段树分治
题目:https://loj.ac/problem/121 离线,LCT维护删除时间最大生成树即可.注意没有被删的边的删除时间是 m+1 . 回收删掉的边的节点的话,空间就可以只开 n*2 了. #i ...