成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

細(xì)說 jQuery 事件篇（四） - 改變事件過程

nifhlheimr / 1454人閱讀

摘要：事件對象是一種結(jié)構(gòu)，它會在元素獲得處理事件的機(jī)會時(shí)傳遞給調(diào)用的事件處理程序。事件對象的屬性指的是事件目標(biāo)，它將保存發(fā)生事件的目標(biāo)元素。所以，接下來我們就要想辦法改變事件過程來阻止這個(gè)行為。

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

  
事件對象是一種 DOM 結(jié)構(gòu)，它會在元素獲得處理事件的機(jī)會時(shí)傳遞給調(diào)用的事件處理程序。這個(gè)對象中包含著與事件有關(guān)的信息。

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

樣式為：

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

我們的需求是僅僅當(dāng)點(diǎn)擊 div 區(qū)域時(shí)添加一個(gè)背景色，但是點(diǎn)擊 a 標(biāo)簽時(shí)并不改變背景色。
添加樣式為：

.blueBg {
  background-color: lightblue;
}

jQuery 代碼為：

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

此時(shí)點(diǎn)擊 div 后:

但由于事件冒泡的存在，當(dāng)我們點(diǎn)擊 a 標(biāo)簽跳出頁面后，發(fā)現(xiàn) div 的背景色也被改變。所以，接下來我們就要想辦法改變事件過程來阻止這個(gè)行為。

阻止事件冒泡

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

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

此時(shí)，再點(diǎn)擊 a 標(biāo)簽將不會改變 div 的背景色。
但是根據(jù) jQuery 文檔的說明，stopPropagation 方法對 live 和 delegate 綁定的事件是不支持的。

阻止默認(rèn)行為

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

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

此時(shí)，點(diǎn)擊 a 標(biāo)簽不僅不會改變 div 的背景色，也不會打開新的頁面，也就是說默認(rèn)行為被阻止。

事件委托

曾經(jīng)寫過一篇介紹事件委托的博文 - 《Javascript - 事件委托是怎么工作的？》。這里就不詳細(xì)寫了，但是 jQuery 提供了專門的方法來實(shí)現(xiàn)事件委托，就是利用 .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/

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78167.html

相關(guān)文章

  • 細(xì)說 jQuery 事件篇（五） - 事件的移除和重綁定

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

    boredream 評論0 收藏0

  • 細(xì)說 jQuery 事件篇（六） - 模擬用戶操作

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

    syoya 評論0 收藏0

  • 細(xì)說 jQuery 事件篇（三） - 事件傳播

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

    Cc_2011 評論0 收藏0

  • 細(xì)說 jQuery DOM操作篇（二） - DOM 樹操作

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

    Anchorer 評論0 收藏0

  • 細(xì)說 jQuery 事件篇（二） - 處理簡單事件

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

    ckllj 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<