【js】事件捕获与冒泡 (这可能是这个知识点 字最少，且讲的最清楚的教程)

　　　　<div id="parent">

            <div id="child"></div>

        </div>

例1

　　parent.addEventListener("click",fn1)

　　child.addEventListener("click",fn2)

　　

　　此时点击child

　　 　　捕获:document=>...=>parent=>child

　　　　 找到目标child

　　　　 冒泡：执行child的click事件(fn1)=>执行parent的click事件(fn2)=>...=>document

　　　　

　　

　　阻止冒泡：event.stopPropagation()||event.cancelBubble();

　　　　如果用在child的click事件里，则点击child时不会再触发fn1

 

例2

　　parent.addEventListener("click",fn1,true)　　//最后一个参数 设置 是否在捕获阶段执行事件

　　child.addEventListener("click",fn2,true)

　　此时点击child

　　 　　捕获:document=>...=>parent（执行fn1）=>child（执行fn2）

　　//需注意：捕获阶段执行事件将被不能被阻止；