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

nifhlheimr 發布于2019-08-19 14:53 / 1430人閱讀

摘要：事件對象是一種結構，它會在元素獲得處理事件的機會時傳遞給調用的事件處理程序。事件對象的屬性指的是事件目標，它將保存發生事件的目標元素。所以，接下來我們就要想辦法改變事件過程來阻止這個行為。

在《細說 jQuery 事件篇（三） - 事件傳播》中提到了事件冒泡可能造成的弊端，當時舉了 mouseout 的例子，對于 mouseout 這個特殊情況，我們可以用 hover 方法來解決，但是對于 hover 方法無法解決的情形，我們又應該如何處理呢？
為此，我們必須通過訪問事件對象來改變事件過程。

事件對象是一種 DOM 結構，它會在元素獲得處理事件的機會時傳遞給調用的事件處理程序。這個對象中包含著與事件有關的信息。

事件對象 event 的 target 屬性指的是事件目標，它將保存發生事件的目標元素。
首先，我們舉一個 hover 無法處理的例子：


  
    segmentfault

樣式為：

div {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}

我們的需求是僅僅當點擊 div 區域時添加一個背景色，但是點擊 a 標簽時并不改變背景色。
添加樣式為：

.blueBg {
  background-color: lightblue;
}

jQuery 代碼為：

  $("div").click(function() {
    $("div").addClass("blueBg");
  });

此時點擊 div 后:

但由于事件冒泡的存在，當我們點擊 a 標簽跳出頁面后，發現 div 的背景色也被改變。所以，接下來我們就要想辦法改變事件過程來阻止這個行為。

阻止事件冒泡

利用事件對象的 .stopPropagation() 方法可以阻止事件冒泡。下面我們來阻止 a 標簽向上冒泡。修改 jQuery 代碼如下：

  $("a").click(function(event) {
    event.stopPropagation();
  });
  $("div").click(function(event) {
    $("div").addClass("blueBg");
  });

此時，再點擊 a 標簽將不會改變 div 的背景色。
但是根據 jQuery 文檔的說明，stopPropagation 方法對 live 和 delegate 綁定的事件是不支持的。

阻止默認行為

如果此時我們還希望能阻止 a 標簽的默認行為，也就是打開一個頁面的行為，這里我們需要用到事件對象的 .preventDefault() 方法。

  $("a").click(function(event) {
    event.preventDefault();
    event.stopPropagation();
  });
  $("div").click(function(event) {
    $("div").addClass("blueBg");
  });

此時，點擊 a 標簽不僅不會改變 div 的背景色，也不會打開新的頁面，也就是說默認行為被阻止。

事件委托

曾經寫過一篇介紹事件委托的博文 - 《Javascript - 事件委托是怎么工作的？》。這里就不詳細寫了，但是 jQuery 提供了專門的方法來實現事件委托，就是利用 .on() 方法。
對于之前博文的例子：


    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6

利于 jQuery 的 on 方法可以簡寫為：


    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6

參考

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

GPU云服務器云服務器 html視口改變事件 js事件執行過程事件jquery jquery事件

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

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

細說 jQuery 事件篇（五） - 事件的移除和重綁定

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

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

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

syoya 2019-08-19 14:53 評論0 收藏0
細說 jQuery 事件篇（三） - 事件傳播

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

Cc_2011 2019-08-19 14:51 評論0 收藏0
細說 jQuery DOM操作篇（二） - DOM 樹操作

摘要：此時，點擊新建的將會觸發。設置元素內容的方法則使用上述兩種方法，將新內容作為參數傳遞即可，例如修改上例中的文本內容方法同理。我們知道通過 $() 函數可以訪問文檔中的元素，并返回一個 jQuery 對象，并且通過一系列方法，我們可以修改元素的樣式和內容，實際上，我們還可以通過該函數做更多的事情，例如添加、刪除、復制等操作來改變 DOM 樹的結構。創建元素我們可以通過 $() ...

Anchorer 2019-08-21 12:20 評論0 收藏0
細說 jQuery 事件篇（二） - 處理簡單事件

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

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