事件冒泡简述及应用

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

事件捕获方式(描述事件触发时序问题)有三种:
(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
 
原文地址:https://www.cnblogs.com/juicy-initial/p/7601886.html