javascript 中事件冒泡和事件捕獲機制的詳解
二者作用:描述事件觸發(fā)時序問題
事件捕獲:從document到觸發(fā)事件的那個節(jié)點,即自上而下的去觸發(fā)事件---由外到內(nèi)
事件冒泡:自下而上的去觸發(fā)事件---由內(nèi)到外
綁定事件方法的第三個參數(shù),就是控制事件觸發(fā)順序是否為事件捕獲
true,事件捕獲;false,事件冒泡
一般默認(rèn)false,即事件冒泡
Jquery的e.stopPropagation會阻止冒泡,意思就是到DOM為止,祖先級的事件就不要觸發(fā)了
下面是我嘗試的例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件冒泡與事件捕獲</title> <script> window.onload = function () { document.getElementById("parent").addEventListener("click",function(e){ alert("parent事件被觸發(fā),"+this.id); },true) document.getElementById("child").addEventListener("click",function(e){ alert("child事件被觸發(fā),"+this.id) },true) } </script> </head> <body> <div id="parent"> parent事件 <div id="child" class="child"> child事件 </div> </div> </body> </html> 例子里我加了第三個true,是事件捕獲。
如果不加則是默認(rèn)的事件冒泡,這時候事件觸發(fā)時序就是自內(nèi)向外
以上就是javascript 中事件冒泡和事件捕獲機制的詳解,如有疑問請留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
新聞熱點
疑難解答