Dom捕捉事件和冒泡事件-原理与demo测试
2015-06-10 17:57
375 查看
先参考一下百度百科对冒泡事件流的解释:
----------不喜欢读文字的同学,可以直接看下面demo,传递顺序简单明了!http://baike.baidu.com/link?url=kaeJHTii_1uVgxD_d4LGnqR2mSlNGtEMw8Y9uRZKq_LJjBmmG3lHi9imKniETjpPFPUn4bFCy9dRJ_jfwSzVkK
DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流,微软则实现了冒泡事件流。幸运的是,W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。
1事件传播——冒泡与捕获
默认情况下,事件使用冒泡事件流,不使用捕获事件流。然而,在Firefox和Safari里,你可以显式的指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true。2冒泡事件流
当事件在某一DOM元素被触发时,例如用户在客户名字节点上点击鼠标,事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次,直到它遇到依附有该事件类型处理器的节点,此时,该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡,在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法,在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播,事件将一直通过DOM冒泡直至到达文档根。3捕获事件流
事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递。在这个过程中,事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获,如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理;否则,事件会被接着传递给派生元素路径上的下一元素,直至目标元素。事件到达目标元素后,它会接着通过DOM节点再进行冒泡。------------------------------------------------
博主经营一家发饰淘宝店,都是纯手工制作哦,开业冲钻,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!
店名:
小鱼尼莫手工饰品店
经营:
发饰、头花、发夹、耳环等(手工制作)
网店:
http://shop117066935.taobao.com/
---------------------------------------------------------------------
继续正题...
Demo测试:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>bubble event</title> <style type="text/css"> body{margin:0;} #one{ width:500px; height:300px; background:rgb(255,0,0); } #two{ width:400px; height:260px; background:rgb(255,50,50); } #three{ width:300px; height:240px; background:rgb(255,100,100); } #four{ width:200px; height:200px; background:rgb(255,150,150); } </style> </head> <body> <div id='one'> <div id='two'> <div id='three'> <div id='four'> </div> </div> </div> </div> <script> var one = document.getElementById('one'); var two = document.getElementById('two'); var three = document.getElementById('three'); var four = document.getElementById('four'); var useCapture = true; //false为冒泡获取【目标元素先触发】 true为捕获获取【父级元素先触发】 one.addEventListener('click', function() { console.log('one'); }, useCapture); two.addEventListener('click', function() { console.log('two'); }, useCapture); three.addEventListener('click', function() { console.log('three'); }, useCapture); four.addEventListener('click', function() { console.log('four'); }, useCapture); /* false 冒泡 点击four div 输出结果:four three two one true 捕获 点击four div 输出结果: one two three four */ </script> </body> </html>
分析:
addEventListener第三个参数useCapture ,true时为捕获,false时为冒泡
冒泡从目标对象开始,向父级元素至window传递;捕获从window底层逐级至目标对象传递!
店名:
小鱼尼莫手工饰品店
经营:
发饰、头花、发夹、耳环等(手工制作)
网店:
http://shop117066935.taobao.com/
转载请注明出处:
http://www.cnblogs.com/qiongmiaoer/p/4566917.html
相关文章推荐
- 第5讲(机器人的添加)
- Myeclipse9M1 手动安装插件 读取properties文件 修改bundles.info
- JS中需要注意的知识点
- 理解离散傅立叶变换(一. 傅立叶的起源变换)
- protocol buffers vs json vs XML
- object-c 多参数方法
- MySQL Study之--Mysql启动失败“mysql.host”
- NOJ1167 丑陋数 想法题
- server2008 提示密码即将过期
- CAD控件:控件图形数据库概要说明
- 让linux支持qq手机音乐播放
- VC操作XML文件
- 【BZOJ1833】【ZJOI2010】数字计数 数位DP
- cocos2dx: vs下 vld 使用记录
- PHP Warning: date() [function.date]: It is not safe to rely on the system's timezone
- Android Fragment与Activity之间的数据交换(Fragment从Activity获取数据)
- LeetCode183:Customers Who Never Order
- Storm的DRPC
- linux文件目录操作
- VectorCAST技术参数