在JavaScript中，事件传播是一种重要的概念。当HTML页面中的某个元素触发了某个事件时，这个事件会沿着元素树向上传递给父元素以及祖先元素或者向下传递到子元素和后代元素。这种传播方式称为事件传播。

事件传播分为三个阶段：

1、事件捕获阶段（capturing phase）事件从根元素一直往下传递，直到到达需要触发事件的目标元素。2、目标阶段（target phase）事件达到目标元素，触发对应事件处理函数。3、事件冒泡阶段（bubbling phase）事件从目标元素依次往上，到达根元素。

举个例子：

<div id="grandfather"><div id="father"><div id="son"></div></div></div>

假设我们给son元素绑定了一个点击事件，我们来分析这个事件在不同阶段分别会触发哪些元素的事件处理函数。

son.addEventListener("click", function (event) {console.log("son被点击了");});father.addEventListener("click", function (event) {console.log("father被点击了");});grandfather.addEventListener("click", function (event) {console.log("grandfather被点击了");}, true);

上面的代码使用addEventListener方法给son、father和grandfather分别绑定了一个“click”事件处理函数，grandfather给它设置了第三个参数为true，表示在事件捕获阶段处理这个事件。
当我们在页面上点击son元素时，会先由document对象开始事件捕获，一直传递到grandfather元素，触发它的事件处理函数。随后，son元素会触发事件处理函数，最后事件冒泡到grandfather元素，又会触发一次事件处理函数，输出结果如下：

grandfather被点击了son被点击了grandfather被点击了

事件的传播还有一个比较有用的特性——事件委托。假设我们有一个列表元素，里面有很多li元素。我们给列表元素绑定一个点击事件处理函数，但我们只想在点击li元素时触发这个处理函数。

<ul id="list"><li>item1</li><li>item2</li><li>item3</li><li>item4</li></ul>

var list = document.getElementById("list");list.addEventListener("click", function(event) {var target = event.target;if(target.tagName.toLowerCase() === "li") {console.log(target.innerText + "被点击了");}});

上面的代码给列表元素list绑定了一个“click”事件处理函数。在这个处理函数里，我们通过event.target属性来获取当前触发事件的元素，如果这个元素的标签名为“li”，我们就输出它的innerText，也就是它里面的文本。

事件委托的好处在于，它可以减少事件处理函数的数量，代码更加简洁，而且可以避免给每一个li元素都绑定一个处理函数的复杂性。

在实际开发中，我们经常需要处理一些复杂的事件流，如拖拽事件、键盘事件等。了解事件传播是理解这些事件的关键。