标签：
先插入一条广告，博主经营一家发饰淘宝店，都是纯手工制作哦，开业冲钻，只为信誉！需要的亲们可以光顾一下！谢谢大家的支持！
店名：
小鱼尼莫手工饰品店
经营:
发饰、头花、发夹、耳环等（手工制作）
网店：
http://shop117066935.taobao.com/
马上开始正题...
----------不喜欢读文字的同学，可以直接看下面demo，传递顺序简单明了！
http://baike.baidu.com/link?url=kaeJHTii_1uVgxD_d4LGnqR2mSlNGtEMw8Y9uRZKq_LJjBmmG3lHi9imKniETjpPFPUn4bFCy9dRJ_jfwSzVkK
DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的是，W3C决定组合使用这两种方法，并且大多数新浏览器都遵循这两种事件流方式。
<!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
标签：
原文地址：http://www.cnblogs.com/qiongmiaoer/p/4566917.html
