事件冒泡

事件冒泡，页面上的元素的事件是这样传播的：

最里面的元素事件触发——外层元素事件触发——页面事件触发

我们可以看个例子：

function fuDIV(){

  alert("父DIV事件");

 }

 

function ziDIV(){

  alert("子DIV事件");

}

 

<div style="width: 500px;height: 400px;border: 1px solid #000000;" onclick="fuDIV();">

  <div style="width: 300px;height: 200px;border: 1px solid #000000;" onclick="ziDIV();">

 

  </div>

 </div>

由于两个DIV嵌套，单击父的DIV的时候，父的事件会触发。

单击子DIV的时候，子DIV的事件会触发，父DIV的事件也会触发。因为事件会传播，由子DIV传播到父DIV里面去。所以两个DIV的事件都会触发。

 

但是我们有时候不需要事件触发，仅仅是想让子DIV的事件触发，父DIV事件不触发。我们可以采取这个方式：

function fuDIV(event){

  alert("父DIV事件");

}

 

function ziDIV(event){

  alert("子DIV事件");

  event.stopPropagation();  //阻止子事件向父事件冒泡

}

 

<div style="width: 500px;height: 400px;border: 1px solid #000000;" onclick="fuDIV(event);">

  <div style="width: 300px;height: 200px;border: 1px solid #000000;" onclick="ziDIV(event);">

 

  </div>

</div>