為什么必須將$（document）.on（..）放置在頁面上的任何位置，而必須將$（“。cl”）。on（..）放置在$（document）.ready回調中或之后 <body> ？

Question

標題問題說明了一切。 在大多數情況下，我理解后一種情況。 讀取Javascript時，對DOM的引用必須具有某種含義，這就是為什么我們將其包裝在$(document).ready回調中，或將我們的腳本置於<body>下的原因。 我真的不明白為什么$(document).on(...)似乎不管位置如何都可以工作。

任何輸入將是濃湯。

Answer 1

當您執行$(anything) ，任何對象都必須在運行選擇器時存在。

當您進入<head>部分時， document對象已經存在，因為它是整個頁面的主父。 但是，主體中還不存在任何東西，因此$(“.class”)將不存在，因此選擇器將找不到任何東西（或者更糟糕的是，由於主體甚至不存在而失敗）。

但是$(document)確實最早存在，您可以運行腳本（在<head>部分中，因此$(document)可以工作，並且有附加事件處理程序的東西。

如果要在<body>中查找元素，例如示例$(".class") ，則要么必須等待<body>部分加載類似jQuery的.ready() （這樣，這些元素就會在腳本運行之前就已經存在），否則您必須將腳本實際放置在<body>以便在運行腳本時已解析了所需的元素。

如果要在.on()使用委托事件處理，則需要添加以下內容：

$(mySelector).on("click", ".myClass", fn);

然后， $(mySelector)中的對象是事件處理程序將直接附加到的對象，並且這些是運行此代碼行時必須存在的對象。 運行此代碼時，與".myClass"匹配的對象不必存在。 因此，如果通過以下方式附加到文檔對象來進行委托事件處理：

$(document).on("click", ".myClass", fn);

然后，在運行此代碼行時，僅document對象必須存在。 由於document對象是首先創建的，因此當您可以運行javascript代碼時該對象已經存在，因此它似乎總是可以正常工作。

這引發了一個有趣的問題，即您是否可以僅將所有事件處理程序附加到document對象。 如果要這樣做，則需要進行一些權衡（某些事件僅在直接附加到源對象的情況下才能正常工作），因此不應在不了解后果的情況下盲目地這樣做。 有關將所有事件附加到文檔對象上的折衷的詳細討論，請參見此答案。

為什么必須將$（document）.on（..）放置在頁面上的任何位置，而必須將$（“。cl”）。on（..）放置在$（document）.ready回調中或之后 <body> ？

問題描述

1 個解決方案

解決方案1
3 已采納 2014-04-20 16:01:44

為什么必須將$（document）.on（..）放置在頁面上的任何位置，而必須將$（“。cl”）。on（..）放置在$（document）.ready回調中或之后 <body> ？

問題描述

1 個解決方案

解決方案1 3 已采納 2014-04-20 16:01:44

解決方案1
3 已采納 2014-04-20 16:01:44