在JS中，綁定的事件默認的執行時間是在冒泡階段執行，而非在捕獲階段（重要），這也是為什么當父類和子類都綁定了某個事件，會先調用子類綁定的事件，后調用父類的事件。直接看下面實例
<!Doctype html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;padding: 0;} </style></head><body><div id="id1" style="height:400px; border:1px solid #000;"> <div id="id2" style="height:200px; border:1px solid #000;"> <div id="id3" style="height:50px; border:1px solid #000;"></div> </div></div></body><script type="text/javascript"> var obj1=document.getElementById('id1'); obj1.addEventListener('click',function(){ alert('id1'); },false); var obj2=document.getElementById('id2'); obj2.addEventListener('click',function(){ alert('id2'); },true); var obj3=document.getElementById('id3'); obj3.addEventListener('click',function(){ alert('id3'); },true); /*如果第三個參數為true，則事件在捕獲階段執行，如果第三個參數為false，則事件在冒泡階段執行*/</script></html>當點擊id3元素時候，執行結果是：id2，id3，id1
解析：因為obj2與obj3綁定的方法在捕獲階段執行，obj1的事件在冒泡階段執行。
總結
在JS中，綁定的事件默認的執行時間是在冒泡階段執行，而非在捕獲階段，必須要理解
不過我們可以通過綁定事件時，指定事件執行時間是在冒泡階段還是捕獲階段。
obj.addEventListener(event,function(){},bool)
bool:false，代表冒泡階段執行
bool:true，代表捕獲階段執行
JS在默認情況下獲取事件后，就開始從根元素開始捕獲所有該事件的監聽對象，然后在冒泡階段逐一執行。捕獲階段是在冒泡階段前面
阻止冒泡
w3c的方法是e.stopPropagation()，IE則是使用e.cancelBubble = true；
阻止默認行為
w3c的方法是e.preventDefault()，IE則是使用e.returnValue = false;
關于JS 事件冒泡和onclick,click,on()事件觸發順序
onclick,click,on()的優先關系：onclick>click>on()；
onclick和click綁定的事件，彼此之間遵守事件冒泡規則，從內到外觸發；
on()綁定的事件，總是晚于onclick和click綁定的事件觸發；
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
