事件捕獲和事件冒泡什么意思？謝謝關(guān)于事件捕獲和事件冒泡，我寫了一篇關(guān)于JS事件流和DOM事件處理程序的文章https://www.toutiao.com/i6392562710684369410/如果

事件捕獲和事件冒泡什么意思？

謝謝

關(guān)于事件捕獲和事件冒泡，我寫了一篇關(guān)于JS事件流和DOM事件處理程序的文章https://www.toutiao.com/i6392562710684369410/如果你有興趣，可以直接去看看。

下面是對事件流知識的簡要介紹。

事件流可以理解為頁面上DOM節(jié)點之間傳播的事件序列，主要分為三個過程：事件捕獲階段事件目標階段事件冒泡階段。您可以從下圖中看到事件傳播過程。

事件捕獲

事件捕獲的思想是，頁面上最外層的節(jié)點首先接收事件，然后逐步將它們傳播到內(nèi)層元素。例如，在上面的示例中，事件捕獲階段的傳播順序是：window--> document--> HTML--> body--> table--> tbody--> tr--> td

event bubble

事件bubble與事件捕獲正好相反。它的思想是讓最里面的節(jié)點先接收事件，然后一步一步地傳播到最外層。在上面的例子中，事件冒泡階段的傳播順序是：TD--> tr--> tbody--> table--> body--> HTML--> document--> window

event target stage

無論是在事件傳播階段還是在事件冒泡階段，它都必須經(jīng)過事件目標階段，這意味著要處理DOM節(jié)點的事件。

js如何取消事件冒泡？

1. Cancelbubble（HTML DOM事件對象屬性）：如果事件句柄希望阻止事件傳播到包含對象，則必須將此屬性設(shè)置為true。

2. Stoppropagation（htmldom事件對象方法）：終止事件在傳播過程的捕獲、目標處理或冒泡階段進一步傳播。調(diào)用方法后，將調(diào)用處理事件的節(jié)點上的處理程序，并且不再將事件分派給其他節(jié)點。

3. Preventdefault（htmldom事件對象方法）告訴瀏覽器不要執(zhí)行與事件相關(guān)聯(lián)的默認操作。示例：函數(shù)stopbuble（E）{if（E&E.stoppropagation）E.stoppropagation（）elsewindow.event.cancelBubble=真}將此stopbuble（E）函數(shù)放入要防止事件冒泡的函數(shù)中，以防止事件冒泡