細說 jQuery 事件篇（三） - 事件傳播

Cc_2011 發布于2019-08-19 14:51 / 1552人閱讀

摘要：是如何決定由哪個元素來處理事件的，以及又是如何優化處理這個問題的，這些都涉及到了事件傳播。事件冒泡的弊端事件冒泡可能會導致意料之外的行為，例如在響應事件時，依舊是上例，當為最外層的添加一個事件。使用方法可以避免事件傳播導致的問題。

Javascript 是如何決定由哪個元素來處理事件的，以及 jQuery 又是如何優化處理這個問題的，這些都涉及到了事件傳播。

事件傳播策略

當頁面內的發生一個事件時，每個層次的 DOM 元素都有機會來處理這個事件，為了弄懂整個過程，舉例說明：


  
    segmentfault

1.事件捕獲

有兩種策略來處理事件，第一種是事件捕獲。
當采取“事件捕獲”策略時，點擊 a 標簽后，事件首先交給外層的元素，然后再往內交給更具體的元素：

div -> span -> a

2.事件冒泡

另一種策略是“事件冒泡”，事件冒泡與事件捕獲剛好相反，當點擊 a 標簽后，首先會發送到最具體的元素，在這個元素得到響應后，事件會往上冒泡到更外層的元素：

a -> span -> div

一開始，不同的瀏覽器采用不同的策略來處理事件傳播，為了統一化，DOM 標準規定應該同時使用著兩種策略，首先通過“事件捕獲”來捕獲到最具體的元素，接著通過“事件冒泡”返回到 DOM 樹的頂層。

3.統一策略

同時，我們很容易理解，對于事件的處理程序既可以發生在事件捕獲階段，也可以發生在事件冒泡階段，jQuery 為了統一策略決定始終在事件冒泡階段注冊事件處理程序。因此，我們可以假定最具體最內層的元素會首先獲得響應事件的機會。

事件冒泡的弊端

事件冒泡可能會導致意料之外的行為，例如在響應 mouseout 事件時，依舊是上例，當為最外層的 div 添加一個 mouseout 事件。此時，如果鼠標移出 div 區域時，肯定會觸發 mouseout 事件綁定的程序，這是我們期望的，但是如果鼠標是從 a 元素上離開時，a 元素也會取得一個 mouseout 事件，再通過事件冒泡后，外層的 div 也會獲得，這顯然不是我們想要的。
給 div 添加樣式來便于區分：

div {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

綁定 mouseout 事件到 div 上：

  $("div").mouseout(function() { 
    //觸發 `alert`
    alert("mouse is out!");
  });

當鼠標從淡藍色的區域移開時，觸發 alert，但是當鼠標放到 a 標簽上后再移開，即使沒移開 div 區域，同樣也會觸發 alert，這顯然不是我們希望的，這就是事件冒泡帶來的弊端。
這里介紹兩種直接簡單的方法來解決這個問題。

第一是使用 jQuery 自帶的 .hover() 方法，.hover() 方法接受兩個函數參數，第一個參數在鼠標進入綁定元素時執行，第二個參數在鼠標移除綁定元素時執行。使用 .hover() 方法可以避免事件傳播導致的問題。

  $("div").hover(function() {}, function() {
    alert("mouse is out!");
  });

第二種方法是使用 mouseleave 來代替 mouseout 方法。

  $("div").mouseleave(function() {
    //觸發 `alert`
    alert("mouse is out!");
  });

這兩種方法是針對 mouseout 可能出現的問題來解決的，對于事件冒泡可能導致的其他弊端現象，我們需要用更加適用的方法來解決，因為這個知識點在書中的下一個章節介紹，所以我打算在下一篇博文中總結。

參考

http://book.douban.com/subject/24669823/

云服務器 GPU云服務器阻止事件傳播事件jquery jquery事件 jquery鍵盤事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78141.html

細說 jQuery 事件篇（四） - 改變事件過程

摘要：事件對象是一種結構，它會在元素獲得處理事件的機會時傳遞給調用的事件處理程序。事件對象的屬性指的是事件目標，它將保存發生事件的目標元素。所以，接下來我們就要想辦法改變事件過程來阻止這個行為。在《細說 jQuery 事件篇（三） - 事件傳播》中提到了事件冒泡可能造成的弊端，當時舉了 mouseout 的例子，對于 mouseout 這個特殊情況，我們可以用 hover 方法來解決，...

nifhlheimr 2019-08-19 14:53 評論0 收藏0
細說 jQuery 事件篇（二） - 處理簡單事件

摘要：我們可以利用可以對用戶發起的事件進行處理，這里以樣式轉換為例來說明。其他類似的操作事件都可以通過這個方法，將處理事件的程序綁定到同名事件上面。我們可以利用 jQuery 可以對用戶發起的事件進行處理，這里以樣式轉換為例來說明。增添樣式基于用戶的事件，對特定的 DOM 元素樣式進行轉換是 jQuery 處理事件中比較常見的情形，舉例說明，當用戶點擊輸入框后，會增添 highli...

ckllj 2019-08-19 14:51 評論0 收藏0
細說 jQuery 事件篇（五） - 事件的移除和重綁定

摘要：一種做法是在事件處理程序中使用條件語句進行判斷，另一種更徹底的做法就是直接移除該處理程序。事件重綁定我們添加一個按鈕，當點擊按鈕后，所有的事件的處理程序又被重新綁定回來。如果我們需要移除已經注冊的事件處理程序，使某些處理程序失效。一種做法是在事件處理程序中使用條件語句進行判斷，另一種更徹底的做法就是直接移除該處理程序。移除處理程序假設有個 div 和 button，當我們點擊...

boredream 2019-08-19 14:53 評論0 收藏0
細說 jQuery 事件篇（六） - 模擬用戶操作

摘要：查看上方法被觸發的原因是但是通過方法直接修改元素的值并不能觸發事件，只有當用戶真實輸入并改變框的內容時才有效。但是假設我們希望能模擬用戶的操作，則需要用到方法，修改代碼如下此時，不需要用戶進行點擊操作，通過已經模擬了一次用戶的操作。前陣子在調一個 bug 的時候遇到一個很坑的問題，在判斷一個輸入框是否有用戶輸入時觸發 updateModel 操作，并向后臺發送 PUT 請求，結果調試...

syoya 2019-08-19 14:53 評論0 收藏0
細說 jQuery 事件篇（一） - 代碼執行時機

摘要：在元素一篇介紹過，可以使用來使得代碼在加載完畢后自動執行代碼，接下來具體介紹下這個機制。這樣看上去貌似沒什么問題，但是如果有兩個函數需要指定時就會遇到麻煩，因為屬性只能保存對一個函數的引用，如果我們寫成以下形式最后代碼執行后的效果是會覆蓋。在元素一篇介紹過，jQuery 可以使用 $(document).ready() 來使得代碼在 DOM 加載完畢后自動執行代碼，接下來具體介紹下這...

dunizb 2019-08-19 14:51 評論0 收藏0