参考原文: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:

(index):45 DIV 1
(index):45 P 1
(index):52 span

如果为false:

span
(index):45 P 3
(index):45 DIV 3

event事件传播规则的更多相关文章

  1. JS 传播事件、取消事件默认行为、阻止事件传播

    1.事件处理程序的返回值 通常情况下,返回值false就是告诉浏览器不要执行这个事件相关的默认操作.例如,表单提交按钮的onclick事件处理程序能通过返回false阻止浏览器提交表单,再如a标签的o ...

  2. Event事件

    妙味课堂-Event事件 1.焦点:当一个元素有焦点的时候,那么他就可以接受用户的输入(不是所有元素都能接受焦点) 给元素设置焦点的方式: 1.点击 2.tab 3.js 2.(例子:输入框提示文字) ...

  3. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  4. spring发布和接收定制的事件(spring事件传播)

    spring发布和接收定制的事件(spring事件传播) 2012-12-26 20:05 22111人阅读 评论(2) 收藏 举报  分类: 开源技术(如Struts/spring/Hibernat ...

  5. javascript 事件传播与事件冒泡,W3C事件模型

    说实话笔者在才工作的时候就听说了什么"事件冒泡",弄了很久才弄个大概,当时理解意思是子级dom元素和父级dom元素都绑定了相同类型的事件,这时如果子级事件触发了父级也会触发,然后这 ...

  6. event事件:

    onabort: 图像的加载被中断onblur: 元素失去焦点onchange: 域的内容被改变onclick: 当用户点击某个对象时调用的事件句柄ondblclick: 当用户双击某个对象时调用的事 ...

  7. Event事件详解

    首先提到event,先要明白event的产生,也要先明白焦点,什么是焦点.焦点 : 使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 我们可以通过一些方式给元素设置 ...

  8. event 事件1

    1.事件流 1.1 事件冒泡 IE8- 浏览器支持的事件流是事件冒泡.事件冒泡是事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)的过程. <!doctype html&g ...

  9. 【js】event(事件对象)详解

    1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...

随机推荐

  1. Java中线程同步的方法

    同步方法 即有synchronized关键字修饰的方法. 由于java的每个对象都有一个内置锁,当用此关键字修饰方法时, 内置锁会保护整个方法.在调用该方法前,需要获得内置锁,否则就处于阻塞状态. 注 ...

  2. 小程序和ThinkPHP5结合实现登录状态(含代码)

    本篇文章给大家带来的内容是关于小程序和ThinkPHP5结合实现登录状态(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 微信小程序中,一般会涉及三种登录方式: 1. 使用微 ...

  3. Mac系统常用快捷键

    Mac系统常用快捷键,摘录自: https://www.cnblogs.com/ios8/p/Mac-OSX-keyword-cmd.html 以下为常用的快捷键 ctrl+shift 快速放大doc ...

  4. CUDA H624解码性能测试

    测试环境: Cpu:       Inter(R)Core(TM)i7-4790 CPU @3.6GHZ GPU:         NVIDIA GeForce GTX960* 1 操作系统:   W ...

  5. POJ2155 Matrix

    分析 好博客 区间修改,单点查询的题,可以用经典的树状数组的转化,把它化为单点修改,区间查询. 方法是在一些点上加1,最后查询单点的前缀和模2即为答案.相当于维护的是一个异或差分,利用了容斥. 可对查 ...

  6. solr学习四(关于性能的杂知识)

    将所有只用于搜索的,而不需要作为结果的field(特别是一些比较大的field)的stored设置为false 比如我们在solr中index了一篇word,对于这篇word,我们只需要这篇文章的下载 ...

  7. net core 2.0学习笔记(一):开发运行环境搭建 (转)

    期待已久的.net core 2.0终于发布了!大家等的花儿都谢了. 不过比预期提前了一个多月,这在微软历史上还真的不多见.按照历史经验看,2.0版本应该比较靠谱,我猜这也是社区非常火爆的原因吧.下面 ...

  8. bzoj 3674 可持久化并查集加强版——可持久化并查集

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3674 用主席树维护 fa[ ]  和 siz[ ] .改 fa[ ] 和改 siz[ ] 都 ...

  9. gitlab配合walle搭建发布系统

    理解walle实现发布代码的原理: ​ 宿主机:walle系统搭建的服务器以及拉取gitlab代码的服务器,这个时候gitlab一般都是另外一台服务器. 目标机器:版本最终发布的目的机器,或者目的机群 ...

  10. 【jmeter】jmeter之“参数化”

    参数化:简单的来理解一下,我们录制了一个脚本,这个脚本中有登录操作,需要输入用户名和密码,假如系统不允许相同的用户名和密码同时登录,或者想更好的模拟多个用户来登录系统. 这个时候就需要对用户名和密码进 ...