事件冒泡
事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。
事件冒泡是自下而上(从最深节点开始,向上传播事件)的触发事件
//例子 <div id="parent"> <div id="child" class="child"></div> </div> <script> var d_parent = document.getElementById("parent"); var d_child= document.getElementById("child"); d_parent.addEventListener("click",function(e){ alert("parent事件被触发,"+this.id); }) d_child.addEventListener("click",function(e){ alert("child事件被触发,"+this.id) }) <script> //结果: //child事件被触发,child //parent事件被触发,parent //结论:先child,然后parent。事件的触发顺序自内向外,这就是事件冒泡。
阻止冒泡
绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。默认false,即事件冒泡。
true,事件捕获;false,事件冒泡。
<script> var d_parent = document.getElementById("parent"); var d_child= document.getElementById("child"); d_parent.addEventListener("click",function(e){ alert("parent事件被触发,"+this.id); },true) d_child.addEventListener("click",function(e){ alert("child事件被触发,"+this.id) },true) <script> //结果: //parent事件被触发,parent //child事件被触发,child //结论:先parent,然后child。事件触发顺序变更为自外向内,这就是事件捕获。 来源:itnose