細說 jQuery 事件篇（一） - 代碼執行時機

dunizb 發布于2019-08-19 14:51 / 2810人閱讀

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

在元素一篇介紹過，jQuery 可以使用 $(document).ready() 來使得代碼在 DOM 加載完畢后自動執行代碼，接下來具體介紹下這個機制。

  $document.ready() 可以簡寫為 $()，為了書寫更直觀，本文暫不采用簡寫方式。

比較 window.onload

我們可以使用原生 Javascript 中的 window.load 方法實現 $document.ready() 的效果，但兩者還是有不小的差異。
對于 window.load 是指整個文檔對象已經完完全全地加載到頁面中來，而 jQuery 的 $document.ready() 方法則是指 DOM 完全就緒，兩者的差異可以用一個例子來說明：

假設當前頁面具有大量的圖像文件，對于 window.load 方法，必須等到所有關聯的圖像文件都已經下載完畢后才生效，而 $document.ready() 則在 HTML 下載完畢并已經解析為 DOM 樹時便已經生效。

這樣看上去貌似 jQuery 的方法要優于原生 Javascript 的處理方法，實際上也的確如此，但對于有些情況下，則必須使用 load 方法才會生效，例如上例中的圖像，當我們在代碼中需要對圖像的長寬屬性進行處理時，則需要使用 load 方法來實現，這兩種方法應該根據實際需求配合使用。

單頁面執行多個腳本

在傳統的 Javascript 代碼中，我們經常看到將一個函數指定給 DOM 元素的對應屬性，例如如下代碼：

function myClick() {
  //do some stuff here.
}

也可以寫成這種形式：

document.querySelector("button").onclick = myClick;

這里寫成 myClick 而不是 myClick()，因為前者指的是對函數引用，后者指的是函數執行，前者因為是引用，所以可以再將來被再次調用，而后者則是指頁面加載時立即調用執行，不能再被調用。

這樣看上去貌似沒什么問題，但是如果有兩個函數需要指定時就會遇到麻煩，因為 onclick 屬性只能保存對一個函數的引用，如果我們寫成以下形式：

document.querySelector("button").onclick = myClick1;
document.querySelector("button").onclick = myClick2;

最后代碼執行后的效果是 myClick2 會覆蓋 myClick1。
而如果我們使用 jQuery 的機制，則能很好地解決這個問題，每次調用 $doucment.ready() 時都會向內部的行為隊列添加一個新的函數，當頁面加載完畢后，所有的函數都會按順序執行。

$(document).ready(function() {
  $("button").click(function() {
    //do myClick1 stuff here.
  });
  $("button").click(function() {
    //do myClick2 stuff here.
  });
});

然而實際上現版本的 Javascript 已經引入 addEventListener 方法來解決這個問題：

document.querySelector("button").addEventListener("click", myClick1, false);
document.querySelector("button").addEventListener("click", myClick2, false);

但是考慮到兼容性，jQuery 可以讓我們更加輕松地應對這個問題。

解決命名沖突

很多時候，我們需要使用的庫不僅僅只有 jQuery，而由于很多庫都會采用 $ 來作為標識符，因此就需要一種解決命名沖突的機制。
為了解決這個常見的問題，jQuery 提供了一個 noConflict() 方法，使用該方法后，可以將 $ 的控制權過度給其他的庫來使用。假設我們有個 myLibrary 的庫，該庫也使用 $ 來作為標識符，那么使用方法為：

此時再寫 jQuery 方法時就必須采用以下的形式：

jQuery(document).ready(function($) {
  //do stuff here.
});

或者使用簡寫方式：

jQuery(function($) {
  //do stuff here.
});

這個其實很好理解，即我們將 jQuery 對象本身作為參數傳遞給回調函數，并且在內部命名為 $，這樣在回調函數內部可以自由書寫正常的 jQuery 代碼。

參考

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

GPU云服務器云服務器代碼只執行一次推薦一篇利用th js事件執行過程點擊事件執行php

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

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

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

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

Cc_2011 2019-08-19 14:51 評論0 收藏0
細說 jQuery Ajax操作篇（一） - 數據加載

摘要：同樣將其綁定在按鈕點擊事件上查看結果為這里需要注意，如果文檔內的格式錯誤，雖然不會報錯，但是將無法執行回調函數。 Ajax 通俗來講即不需要刷新頁面即可從服務器或客戶端上加載數據，當然這些數據的格式是多種多樣的。加載 HTML 我們通常使用加載 HTML 的方法來加載 HTML 片段，并插入到指定位置，假設當前頁面為： load showImg(http://segmen...

paulli3 2019-08-21 12:21 評論0 收藏0
細說 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