事件的传播
-关于事件的传播网景公司和微软公司有不同的理解
-微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，
然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
-网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，
然后在向内传播给后代元素
-W3C综合了两个公司的方案，将事件传播分成了三个阶段
1.捕获阶段
-在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段
-事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段
-事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
-如果希望在捕获阶段就触发事件，可以将addEventListener（）的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
捕获与冒泡传播效果：
<style> .div1{ 300px; height: 300px; background-color: red; } .div2{ 200px; height: 200px; background-color: yellow; } .div3{ 100px; height: 100px; background-color: blue; } </style> <script> window.onload=function(){ var div1=document.querySelector('.div1') var div2=document.querySelector('.div2'); var div3=document.querySelector('.div3'); bind(div1,'click',function(){alert("div1");}) bind(div2,'click',function(){alert("div2");}) bind(div3,'click',function(){alert("div3");}) } function bind(obj, eventstr, callback) { if (obj.addEventListener) { //大部分浏览器兼容的方式 //如果把下面的false改为true将变成捕获阶段执行 //可以发现弹窗的顺序变了 obj.addEventListener(eventstr, callback, false); } else { /* *this是谁由调用方式决定 *callback.call(obj) */ //IE8及以下 obj.attachEvent("on" + eventstr, function() { //在匿名函数中调用回调函数 callback.call(obj); }); } } </script> </head> <body> <div class="div1"> <div class="div2"> <div class="div3"></div> </div> </div> </body>