参考原文: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. 【转】WinForm基础

    winform基础 先修基础:C#语法基础和面向对象编程 1.Winform创建解决方案 2.Winform窗体 3.MessageBOx 4.Winform登录.控制软件只运行一次.回车登录 5.W ...

  2. 最大似然估计和最大后验概率MAP

    最大似然估计是一种奇妙的东西,我觉得发明这种估计的人特别才华.如果是我,觉得很难凭空想到这样做. 极大似然估计和贝叶斯估计分别代表了频率派和贝叶斯派的观点.频率派认为,参数是客观存在的,只是未知而矣. ...

  3. convert CAN frame

    前言 最近了解了一些socket can的知识点,本文主要介绍如何将数据转换为CAN报文,前提是已经确定CAN的传输协议. 本文使用的CAN报文共有22条,这些报文共用一个can id,每条报文使用序 ...

  4. EXCEL教程,包你一学就会

    片名称:自动筛选 照片名称:在Excel中字符替换 照片名称:在Excel中直接编辑“宏” 照片名称:在Excel中为导入外部数据 照片名称:在Excel中行列快速转换 照片名称:在Excel中运行“ ...

  5. 一致性哈希算法(Consistent Hashing Algorithm)

    一致性哈希算法(Consistent Hashing Algorithm) 浅谈一致性Hash原理及应用   在讲一致性Hash之前我们先来讨论一个问题. 问题:现在有亿级用户,每日产生千万级订单,如 ...

  6. HDU 4681 string 求最长公共子序列的简单DP+暴力枚举

    先预处理,用求最长公共子序列的DP顺着处理一遍,再逆着处理一遍. 再预处理串a和b中包含串c的子序列,当然,为了使这子序列尽可能短,会以c 串的第一个字符开始 ,c 串的最后一个字符结束 将这些起始位 ...

  7. (8)propetry装饰器

    propetry是一个内置函数,用来将一个功能伪装成一个数据属性 property将一个方法伪装成一个数据属性class People: def __init__(self,name,height,w ...

  8. j2ee使用struts实现用户的登陆及注冊

    用户名: 密码: <%-- 使用struts标签 --%> <%-- --%>

  9. JSP指令include和JSP动作元素include的区别

    include指令用于在JSP页面静态的包含一个文件,该文件可以是JSP页面.HTML页面.文本文件或者一段java代码.使用include指令的JSP页面在转换时,JSP容器会在其中插入所包含文件的 ...

  10. Linux内核链表

    内核链表的设计思路内核链表中自己实现了一个纯链表(纯链表就是没有数据区域,只有前后向指针)的封装,以及纯链表的各种操作函数(节点创建.插入.删除.遍历······).这个纯链表本身自己没有任何用处,它 ...