js事件傳播流程主要分三個階段:事件捕獲階段浮创、處于目標階段忧吟、事件冒泡階段。
在我們平常用的addEventListener方法中斩披,一般只會用到兩個參數溜族,一個是需要綁定的事件,另一個是觸發(fā)事件后要執(zhí)行的函數雏掠,然而斩祭,addEventListener還可以傳入第三個參數,第三個參數默認值是false乡话,表示在事件冒泡階段調用事件處理函數;如果參數為true摧玫,則表示在事件捕獲階段調用處理函數。
? (1).捕獲階段:事件從根節(jié)點流向目標節(jié)點绑青,途中流經各個DOM節(jié)點诬像,在各個節(jié)點上觸發(fā)捕獲事件,直到達到目標節(jié)點闸婴。
? (2).目標(target)階段:在此階段中坏挠,事件傳導到目標節(jié)點。瀏覽器在查找到已經指定給目標事件的監(jiān)聽器后邪乍,就會運行該監(jiān)聽器降狠。
? ? ? ? (3).事件冒泡:?當為多個嵌套的元素設置了相同的事件處理程序,它們將觸發(fā)事件冒泡機制庇楞。在事件冒泡中榜配,最內部的元素將首先觸發(fā)其事件,然后是棧內的下一個元素觸發(fā)該事件吕晌,以此類推蛋褥,直到到達最外面的元素。如果把事件處理程序指定給所有的元素睛驳,那么這些事件將依次觸發(fā)烙心。
?????????????????如何阻止冒泡??
可以調用事件對象的stopPropagation()方法以阻止事件的繼續(xù)傳播。如果在同一對象上定義了其他處理程序乏沸,剩下的處理程序將依舊被調用淫茵,但調用stopPropagation()之后任何其他對象上的事件處理程序將不會被調用。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 阻止瀏覽器默認行為
? ? ?事件默認行為:瀏覽器自己默認做的事情
? ? ?哪些默認行為要做阻止
? ? ? 1.? a標簽鏈接跳轉
? ? ? 2.? Submit按鈕的提交蹬跃,
? ? ?阻止默認行為的方式
? ? ?event.preventDefault(); ?event.returnValue = false; ?return false;