本文共 1175 字，大约阅读时间需要 3 分钟。

1. 事件冒泡的概念

事件函数绑定： 给**加事件，给元素加事件处理函数。举个栗子。

//oDiv1.onclick = fn1; 事件函数绑定。告诉div1，如果他接收到了一个点击事件，那么他就去执行fn1    //我在马路边捡到一分钱，把他交个警察叔叔    我.on马路边捡到一分钱 = function() {
           把他交个警察叔叔    }

事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制。

2. 关于阻止事件冒泡

阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;

如下所示，点击按钮，没有任何反应。因为oBtn会把这个事件传播到它的父级，一直到document，所以会触发document.onclick，导致执行了oDiv.style.display = ‘none’;所以div显示不出来

针对上面的问题可以将

document.onclick = function() {
           oDiv.style.display = 'none';    }

变成下面这种写法，这样就可以过上1s中显示出来

document.onclick = function() {
           setTimeout(function() {
               oDiv.style.display = 'none';        }, 1000);           oDiv.style.display = 'none';    }

关于这个问题可以通过阻止事件冒泡实现

3. 事件冒泡的好处

由于事件冒泡的机制，所以我们可以把绑定在子级的事件直接绑定在父级上，如下所示。我们希望点击黑色div，红色div会出现，离开红色和黑色的地方，红色div消失。

    
   
        
    
     分享到