js事件捕获和冒泡解析
<div id="box">
<div id="box2">
<p id="test">test</p>
</div>
</div>
<script>
document.getElementById('box').addEventListener('click',function () {
console.log('box')
},true)
document.getElementById('box2').addEventListener('click',function () {
console.log('box2')
},false)
document.getElementById('test').addEventListener('click',function () {
console.log('test')
},false)
</script>
结果:
box
test
box2
addEventListener( name , function , boolean )
boolean (true) :该事件为捕获事件,当事件触发时候,在捕获阶段就执行
boolean (false) :该事件为冒泡事件,当事件触发时候,在冒泡阶段就执行
事件流程 :
1. test 被点击,即事件触发
2. 捕获 box ( box上面绑定了事件为捕获事件,会执行box上面的事件)
3. 捕获 box 2( box2上面绑定了事件为冒泡事件,这里不会执行 )
4. 捕获 test( test上面绑定了事件为冒泡事件,这里不会执行 )
5. 冒泡 test( test上面绑定了事件为冒泡事件,这里会执行test上面的事件 )
6. 冒泡 box2( test上面绑定了事件为冒泡事件,这里会执行test上面的事件)
7. 冒泡 box( test上面绑定了事件为捕获事件,这里不会执行)
8.执行完毕
在上面的事件传播中有一个事件里面执行了 event.stopPropagtion() 方法, 即后面的事件都不会执行了。
代码仅供参考,具体功能可以自己扩展。
http://www.cnblogs.com/jiebba 我的博客,来看吧!
js事件捕获和冒泡解析的更多相关文章
- js 事件监听 冒泡事件
js 事件监听 冒泡事件 的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...
- js中addEventListener第三个参数涉及到的事件捕获与冒泡
js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...
- js事件流机制冒泡和捕获
JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流 从页面中接收事件的顺序称为事件流. IE --> 事件冒泡流 Netsc ...
- js事件捕获,事件冒泡,事件委托以及DOM事件流
一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...
- JS事件捕获和事件冒泡
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 14.0px "Helvetica Neue" ...
- dom事件不求甚解,色解事件捕获和冒泡
以前对事件只会用jq的bind绑定一下,脑海里留着书中的事件循环,一直认为事件就是这儿循环的,最近看园子里的文章,对事件的了解更模糊了 所以我做了个小实验,总结一下看的这些零零碎碎的文章,如果总结错了 ...
- js 事件详解 冒泡
起因:正常情况下我点击s2时是先弹出我是children,再弹出我是father,但是却出现了先弹出我是father,后弹出我是children的情况,这种情况是在和安卓app交互的h5页面中出现的, ...
- Spirit带你彻底了解事件捕获和冒泡机制
Dom标准事件模型 在Dom标准事件模型中,事件是先进行捕获,达到目标阶段时,在进行冒泡的 捕获阶段==>目标阶段==>冒泡阶段 目标元素和非目标元素 在介绍事件捕获和事件冒泡前 我们先要 ...
- javascript事件捕获与冒泡
对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefox,chrom ...
随机推荐
- 二分搜索 HDOJ 2289 Cup
题目传送门 /* 二分搜索:枚举高度,计算体积与给出的比较. */ #include <cstdio> #include <algorithm> #include <cs ...
- 使用JS分页 <span> beta 1.0
<html> <head> <title>分页</title> <style> #titleDiv{ width:500px; backgr ...
- 1、DOS基本命令
命令dir能给列出当前目录下面的所有文件.程序和子目录.所有目录(Windows 中称为文件夹)的目录名前面都有一个<DIR>标记.文件和程序名前面显示有这些文件和程序的大小. 想说的是, ...
- 最简单的SPA(单页应用)实现
$(function(){ var replacePage = function(href, onFinish){ $.get(href,{},function(raw){ var data = ra ...
- 26 c#类的组合
组合即将各个部分组合在一起.程序设计中就是用已有类的对象来产生新的类. 桌子由木板和钉子组合而成,台灯使用灯座,灯管,电线,接头等拼起来的.我们发现自己周围的很多东西都是由更小的其它东西拼凑构成的,就 ...
- Python 设计模式--策略模式
策略模式(Strategy Pattern) 策略模式是一种与行为相关的设计模式,允许你在运行时根据指定的上下文确定程序的动作.可以在两个类中封装不同的算法,并且在程序运行时确定到底执行哪中策略. 特 ...
- (2)HTML元素与属性(已入垃圾框)
HTML元素 开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag) HTML 文档由嵌套的 HTML 元素构成 以上实例包含了七个 HTML 元素 &l ...
- PAT甲级考前整理(2019年3月备考)之一
转载请注明出处:https://www.cnblogs.com/jlyg/p/7525244.html 终于在考前,刷完PAT甲级131道题目,不容易!!!每天沉迷在刷题之中而不能超脱,也是一种 ...
- HTML5——移动端的点击、拖拽
移动端浏览器不支持mouse事件 https://www.cnblogs.com/joyco773/p/6519668.html https://www.cnblogs.com/yjhua/p/525 ...
- Spartan6系列之SelectIO深入详解及高级应用简介
1. 什么是I/O Tile? 对Spartan-6系列FPGA来说,一个IO Tile包括2个IOB.2个ILOGIC.2个OLOGIC.2个IODELAY. 图 1Spartan-6系列 ...