事件冒泡简述及应用

事件代理或者事件委托的含义等同于事件冒泡。

事件捕获方式（描述事件触发时序问题）有三种：
（1）IE从里到外（inside→outside）的冒泡型事件。

（2）Netscape4.0从外到里（outside→inside）的捕获型事件。

（3）DOM事件流，先从外到里，再从里到外回到原点（outside→inside→outside）的事件捕获方法　　

两个应用：

1.事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

window.onload = function(){
    var oUl = document.getElementById("ul1");
   oUl.onclick = function(){
        alert(123);
    }
}

为保证等同于在每个li添加的函数
window.onload = function(){
		    　　var oUl = document.getElementById("ul1");
		    　　oUl.onclick = function(ev){
		    	　　　　var ev = ev || window.event;
		   		　　　　var target = ev.target || ev.srcElement;
		        　　　　if(target.nodeName.toLowerCase() == 'li'){
		        　 　　　　　　	alert(123);
		　　　　　　　  alert(target.innerHTML);
				　　　　}
		    　　}
		}
这样写优点：1.性能更优，内存占用更少，运行速度更快；2.在动态再添加一个节点时，方法同样能作用在该节点

2.让不同的对象同时捕获同一事件，并调用自己的专属处理程序做自己的事情

<div id="parent">

　　<div id="child" class="child"></div>

</div>

document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发，"+this.id);
            })
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发，"+this.id)
            })

运行结果：child事件被触发，child 
         parent事件被触发，parent

补充：
 阻止事件冒泡：e.stopPropagation()
 以下事件不冒泡：blur、focus、load、unload