Js事件傳播流程

Js事件傳播流程

　　js事件傳播流程主要分三個階段:事件捕獲階段、處於目標階段、事件冒泡階段。

　　在我們平常用的addEventListener方法中，一般只會用到兩個參數，一個是需要綁定的事件，另一個是觸發事件后要執行的函數，然而，addEventListener還可以傳入第三個參數，第三個參數默認值是false，表示在事件冒泡階段調用事件處理函數;如果參數為true，則表示在事件捕獲階段調用處理函數。

        

 

 　　(1). 捕獲階段：事件從根節點流向目標節點，途中流經各個DOM節點，在各個節點上觸發捕獲事件，直到達到目標節點。

 

 

 　　(2). 目標（target）階段：在此階段中，事件傳導到目標節點。瀏覽器在查找到已經指定給目標事件的監聽器后，就會運行該監聽器。

        (3). 事件冒泡: 當為多個嵌套的元素設置了相同的事件處理程序，它們將觸發事件冒泡機制。在事件冒泡中，最內部的元素將首先觸發其事件，然后是棧內的下一個元素觸發該事件，以此類推，直到到達最外面的元素。如果把事件處理程序指定給所有的元素，那么這些事件將依次觸發。

 

                  如何阻止冒泡   

可以調用事件對象的stopPropagation()方法以阻止事件的繼續傳播。如果在同一對象上定義了其他處理程序，剩下的處理程序將依舊被調用，但調用stopPropagation()之后任何其他對象上的事件處理程序將不會被調用。

                                                  阻止瀏覽器默認行為

     事件默認行為：瀏覽器自己默認做的事情

     哪些默認行為要做阻止

      1.  a標簽鏈接跳轉

      2.  Submit按鈕的提交，

     3.  右鍵菜單，

     4.文本框的輸入

     阻止默認行為的方式

     event.preventDefault();  event.returnValue = false;  return false;

    自定義右鍵菜單 oncontextmenu

    文本框只能輸入數字