在本教程中，我们将学习有关jQuery中事件传播的信息。

什么是事件传播？

顾名思义，它是事件从一个元素(子元素)传播到下一个元素(父元素)的过程。

事件传播如何发生？

当为子元素触发事件时，它不会在那里停止，而是传播到其父元素(祖先)。
就像爬DOM树一样。

事件冒泡和事件传播是类似概念的两个术语。

例

在以下示例中，我们为ID为" sample-parent-div"的父div和ID为" sample-child-div"的子div处理click事件。

HTML

<div id="sample-parent-div">
  <p>Parent div</p>
  <div id="sample-child-div">
    <p>Child div</p>
  </div>
</div>

CSS

#sample-parent-div {
  background-color: lightgreen;
  height: 300px;
}

#sample-child-div {
  background-color: lightyellow;
  height: 100px;
}

jQuery的

$("#sample-parent-div").on("click", function(){
  console.log("Parent div clicked...");
});

$("#sample-child-div").on("click", function(){
  console.log("Child div clicked...");
});

单击父div之后，在浏览器控制台中，我们将得到以下输出" Parent div clicked ..."。

但是，当单击子div时，我们得到两个输出"单击子div ..."和"单击父div ..."。

这是事件从子元素到父元素的传播。

我们可以使用stopPropagation()方法来防止这种情况。

stopPropagation()

我们使用stopPropagation()方法来停止事件从子元素到父元素的传播。

在下面的示例中，我们为子div包含了stopPropagation()方法。
因此，当我们单击child div时，将仅获得" Child div clicked ..."输出。

jQuery的

$("#sample-parent-div").on("click", function(){
  console.log("Parent div clicked...");
});

$("#sample-child-div").on("click", function(e){
  console.log("Child div clicked...");
  e.stopPropagation();
});