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] 基于词云的关键词提取:wordcloud的使用、源码分析、中文词云生成和代码重写
1. 词云简介 词云,又称文字云.标签云,是对文本数据中出现频率较高的“关键词”在视觉上的突出呈现,形成关键词的渲染形成类似云一样的彩色图片,从而一眼就可以领略文本数据的主要表达意思.常见于博客.微博 ...
- HDU 3046
http://acm.hdu.edu.cn/showproblem.php?pid=3046 典型的最小割模型 #include <iostream> #include <cstdi ...
- 4天赚4000RMB 引流秘籍 卑鄙无耻之徒
他说:有什么引流秘籍吗? 我说:贴吧.天涯.论坛都不错,只要不明着发广告,每天被动加几十个人轻轻松松的,如果执行力好,几百上千都有可能. 他说:我该怎么操作. 我说:网上找点好的帖子,简单修改一下部分 ...
- opencv-python教程学习系列11-几何变换
前言 opencv-python教程学习系列记录学习python-opencv过程的点滴,本文主要介绍几何变换,坚持学习,共同进步. 系列教程参照OpenCV-Python中文教程: 系统环境 系统: ...
- JQuery 基本知识,选择器,事件,DOM操作
一.基本知识 Jquery是什么? 它就是一套JS方法包,jQuery是一个快速,小巧,功能丰富的JavaScript库.它使得HTML文档遍历和操作,事件处理,动画和Ajax更容易使用易于使用的AP ...
- 只需 5 秒钟,你就能取到 WPF 程序的超高分辨率超高清截图
我想要截取一个 WPF 程序的图标,但是它太小了.如果我就这样截屏截下来,是很不高清的.由于我需要制作一份课件,所以我需要超高清版本,可是,如何做才能最快速拿到 WPF 程序的超高清截图呢? 本文分享 ...
- AFN不支持 "text/html" 的数据的问题:unacceptable content-type: text/html
使用AFN若遇到这个错误信息 Request failed: unacceptable content-type: text/html bug原因: 这不是AFNetworking的问题 这是做Ser ...
- hdu2602 DP (01背包)
题意:有一个容量 volume 的背包,有一个个给定体积和价值的骨头,问最多能装价值多少. 经典的 01 背包问题不谈,再不会我就要面壁了. 终于有一道题可以说水过了 ……心好累 #include&l ...
- smarty学习——基本概念
学习一种框架,我们最基本的就是掌握框架的思想,同时了解框架的基本语法. 1.对于定界符的了解 有的smarty模板标签都被加上了定界符. 默认情况下是 { 和},但它们是可被改变的.例如,我们假定你在 ...
- leetcode -day30 Reverse Linked List II
1. Reverse Linked List II Reverse a linked list from position m to n. Do it in-place and in one- ...