如果調用Javascript事件偵聽器並且缺少目標元素，會發生什么情況？

Question

目前，我們正在從Rails項目的一個common.js文件加載整個站點范圍的事件監聽器。 我們知道這里涉及的（大多數）折衷，只是在試圖減輕它們。 一旦掌握了基本架構，我們就可以通過控制器或視圖將它們移至單獨的文件中。

目前，一個快速的問題是我們如何僅在必要時才能激活它們，這困擾着偽造的偽禪問題：

如果某個事件偵聽器在森林中被宣布而沒有人在周圍聽到，那么它還會發出聲音嗎？

換句話說，如果給定頁面的javascript中聲明了基本的偵聽器（即，沒有像.live()或.delegate()這樣的持久性.delegate() ，並且目標元素實際上不在該給定頁面上，則執行任何操作除了用於評估它並檢查元素的DOM的幾個周期外，真的發生了嗎？ 它在內存中活躍嗎，正在尋找那個元素？ 還有嗎 考慮到在其他情況下這樣的調用將生成null / nil / invalid類型的錯誤，似乎永遠不會引發錯誤，這很有趣。

例如：

  $(document).ready(function () {
      $('#element').bind('blur keyup', function);
    }

假設#element不存在。 真的有事嗎？ 此外，將其包裝在類似以下的預過濾器中是否更好：

  $(document).ready(function () {
    if ($('#element')) {
      $('#element').bind('blur keyup', function);
    }

或者，瀏覽器中的.js解釋器是否足夠聰明，以至於可以忽略在$(document).ready上不存在的元素上聲明的基本偵聽器？ 我們應該只在上面聲明初始的簡單形式，然后保留它，還是先檢查元素以某種方式為我們節省一些寶貴的資源和/或避免一些我們沒有看到的隱藏錯誤？ 還是我想念另一個角度？

謝謝！

Answer 1

JQuery旨在與0+個所選元素一起使用。
如果未選擇任何元素，則不會發生任何事情。

請注意，使用jQuery選擇器時永遠不會為空。 例如：

$('#IDontExist') // != null
$('#IDontExist').length === 0 // true (it's ajQuery object with 
                              //       zero selected elements).

文檔說：

如果沒有元素與提供的選擇器匹配，則新的jQuery對象為“空”；否則為0。 也就是說，它不包含任何元素，並且.length屬性為0。

Answer 2

$('#element')如果結果為空集，則jQuery將不執行任何操作。

由於jQuery總是返回對象，因此我們也可以在空集上調用方法，但是在內部，它將在應用邏輯之前進行檢查。

即使您要在附加事件處理程序之前檢查元素是否存在，也可以使用jQuery對象的length屬性。

if ($('#element').length > 0) {
    $('#element').bind('blur keyup', function);
}