blocks|key|666410|text|这不是真的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|666411|这两行代码做的是完全不同的事情。|666412|第一行是选择器为".areaCodeList+a"的委托事件，第二行是附加到".areaCodeList+a"元素的事件。|offset|length|style|CODE|666413|委托事件将触发到每个".areaCodeList+a"元素，尽管该行执行时它在DOM中。|666414|无论如何，根本不建议将委托事件附加到+document+。正如live文档中所写的：|BOLD|666415|666416|由于所有.live()事件都附加在文档元素上，因此在处理事件之前，它们会采用尽可能长和最慢的路径|blockquote|666417|666418|666419|请阅读on+docs|666420|666421|事件处理程序仅绑定到当前选定的元素；当您的代码调用.on()时，它们必须存在于页面上。若要确保元素存在并且可以选择，请在文档就绪处理程序内为页面上HTML标记中的元素执行事件绑定。如果要将新的HTML注入到页面中，请在将新的HTML放入页面后选择元素并附加事件处理程序。或者，使用委托事件附加事件处理程序，如下所述。|666422|666423|委托事件的优点在于，它们可以处理稍后添加到文档中的后代元素中的事件。通过选取在附加委托事件处理程序时保证存在的元素，可以使用委托事件来避免频繁附加和移除事件处理程序。例如，此元素可以是Model-+view+-Controller设计中的视图的容器元素，或者，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他HTML之前，document元素在文档头中可用，因此可以安全地在那里附加事件，而无需等待文档准备就绪。|666424|...|666425|666426|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/on/^0|0|0|8|H|12|H|0|A|H|0|J|8|S|1|J|8|V|4|0|0|0|0|0|3|2|6|4|0|0|0|0|0|0|0|3|0|0|3|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1E|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1F|8|@$F|1G|G|1H|H|I]|$F|1I|G|1J|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1K|8|@$F|1L|G|1M|H|I]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1N|8|@$F|1O|G|1P|H|N]|$F|1Q|G|1R|H|N]|$F|1S|G|1T|H|I]|$F|1U|G|1V|H|I]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1X|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|20|8|@$F|21|G|22|H|I]]|9|@$F|23|G|24|1|25]]|A|$]]|$1|W|3|-4|5|6|7|26|8|@]|9|@]|A|$]]|$1|X|3|Y|5|R|7|27|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|28|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|29|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|2A|8|@$F|2B|G|2C|H|N]]|9|@]|A|$]]|$1|14|3|13|5|6|7|2D|8|@$F|2E|G|2F|H|N]]|9|@]|A|$]]|$1|15|3|-4|5|6|7|2G|8|@]|9|@]|A|$]]]|16|$17|$5|18|19|1A|A|$1B|1C]]]]

This is not true.
Those two lines do totally two different things.
The first one is a delegate event with the selector of <code>&quot;.areaCodeList a&quot;</code> while the second line is an event attached to the <code>&quot;.areaCodeList a&quot;</code> elements.
A delegate event will fire to every <code>&quot;.areaCodeList a&quot;</code> element although it was in the DOM when that line executed.
Anyway, attaching delegate events to the <code>document</code> isn't recommended at all. as written in the <code>live</code> docs:
<blockquote>
Since all .live() events are attached at the document element, events take the longest and slowest possible path before they are handled
</blockquote>
Please read the <code>on</code> <a href="http://api.jquery.com/on/" rel="nofollow noreferrer">docs</a>:
<blockquote>
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers. This
element could be the container element of a view in a
Model-View-Controller design, for example, or document if the event
handler wants to monitor all bubbling events in the document. The
document element is available in the head of the document before
loading any other HTML, so it is safe to attach events there without
waiting for the document to be ready. 
... 
...
</blockquote>

blocks|key|868491|text|这两个都是有效的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|868492|前者适用于动态添加的元素。使用document是因为您要委托document对象的子级上的事件，所以事件会冒泡到文档级。选择最接近的父对象也更方便(而且加载时父对象必须存在于页面上)。|offset|length|style|CODE|868493|后者仍然有效，并且是简单地将事件绑定到特定元素的首选方法。|868494|我个人不建议通过document对象委托，而是通过页面加载时存在的最接近的父对象进行委托。|868495|Here是on()的文档。|868496|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/on/^0|0|F|8|0|0|8|8|0|5|4|0|4|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|13|8|@$D|14|E|15|F|G]]|9|@$D|16|E|17|1|18]]|A|$]]|$1|N|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]]]

Both of those are valid.

The former works for dynamically added elements. You use <code>document</code> because you're delegating events on children of the document object, so events bubble up to the document level. It's also more convenient to select the closest parent you can (and the parent must exist on the page at load).

The latter still works, and is a preferred way to simply bind events to specific elements.

I personally don't recommend delegating through the <code>document</code> object, but rather the closest parent that exists on page load.

<a href="http://api.jquery.com/on/" rel="noreferrer">Here</a> are the docs for <code>on()</code>.

blocks|key|4905730|text|这并不是“推荐”的。第一个代码片段设置了一个“委托”事件，后者是一个“直接”事件。documentation+for+on()对此进行了深入的解释。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4905731|当您需要侦听尚不存在的元素的事件时，委托事件是必要的-这些元素将在AJAX调用后动态创建。它们有时在性能上也会更好--将“真正的”事件处理程序附加到文档对象上所需的内存比附加到1000个按钮上所需的内存要少。|4905732|我想说的是，尽可能使用直接的事件处理程序，或者将委托事件附加到尽可能接近真实事件源的元素。将所有事件处理程序都放在document对象上可能会影响性能-您必须将触发的每个事件与所有选择器进行匹配。如果您需要阻止事件冒泡，可能也需要使用它-如果所有事件都被文档捕获，那么它们已经冒泡到了极点。|4905733|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/on/#direct-and-delegated-events^0|1N|4|15|M|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|Y|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

There's nothing "recommended" about this. The first snippet sets up a "delegated" event, the latter is a "direct" one. The <a href="http://api.jquery.com/on/#direct-and-delegated-events" rel="nofollow">documentation for <code>on()</code></a> explains these in depth.

Delegated events are necessary when you need to listen to events for elements that don't exist yet - ones that will be created dynamically after, for example, an AJAX call. They can also sometimes be better performance-wise - you need less memory to attach a "real" event handler to the document object, than to 1000 buttons.

I'd say it's still preferrable to use direct event handlers when you can, or attach delegate events to an element as close to the real event sources as you can. Having all event handlers on the document object is probably terrible for performance - you have to match every event fired against all the selectors. It's also probably needed if you need to stop an event from bubbling - if all events are caught on the document, they've already bubbled as far as they'll go.

blocks|key|868597|text|我认为你混淆了一些概念。不建议绑定到文档元素，但有时您需要这样做，例如将事件绑定到动态添加的元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|868598|所有这一切似乎都不清楚，所以here是第一个直接使用类选择器并绑定单击事件的示例，该元素在事件绑定后动态插入。如您所见，该事件从未触发过，因为我们选择了一个在绑定事件时DOM中不存在的元素。这相当于一个.click|offset|length|style|CODE|868599|现在看第二个例子。在这里，您可以看到我们正在将根元素定义为document。这意味着click事件将在DOM树上一直向上冒泡，然后如果所单击的元素具有类动态，则会触发该事件。这相当于.live|868600|现在，如果在示例一中，在绑定事件时，元素存在于DOM中，则代码将正常工作，如您所见的here。|868601|话虽如此。下面是一个来自docs的异常，它澄清了上面的行为。|868602|868603|事件处理程序仅绑定到当前选定的元素；当您的代码调用.on()时，它们必须存在于页面上|blockquote|868604|868605|868606|所以，总结一下。如果您确定所选择的元素没有父元素，并且在绑定此事件时该元素肯定位于DOM中，则使用document元素。如果存在父元素，则使用该元素而不是document元素。这样，活动就不会一直在document上冒泡，它只需要走很短的距离。|868607|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/azizpunjani/3vRcJ/|1|http://jsfiddle.net/azizpunjani/bDQKW/|2|http://api.jquery.com/on/^0|0|2T|6|E|4|0|0|T|8|2J|5|0|16|4|1|0|C|4|2|0|0|0|0|0|1D|8|25|8|2R|8|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@$D|19|E|1A|F|G]]|9|@$D|1B|E|1C|1|1D]]|A|$]]|$1|H|3|I|5|6|7|1E|8|@$D|1F|E|1G|F|G]|$D|1H|E|1I|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1J|8|@]|9|@$D|1K|E|1L|1|1M]]|A|$]]|$1|L|3|M|5|6|7|1N|8|@]|9|@$D|1O|E|1P|1|1Q]]|A|$]]|$1|N|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1S|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1V|8|@$D|1W|E|1X|F|G]|$D|1Y|E|1Z|F|G]|$D|20|E|21|F|G]]|9|@]|A|$]]|$1|V|3|-4|5|6|7|22|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]|13|$5|Y|Z|10|A|$11|14]]|15|$5|Y|Z|10|A|$11|16]]]]

I think you are confusing a few concepts. It is not recommended to bind to the document element, however there are times when you want to do so e.g when binding events to dynamically added elements. 

All this may seem unclear, so <a href="http://jsfiddle.net/azizpunjani/3vRcJ/" rel="nofollow">here</a> is the first example which uses the class selector directly and binds a click event, the element is inserted dynamically later after the event is bound. As you can see the event never gets fired because we selected an element that was not present in the DOM at the time the event was bound. This is equivalent to a <code>.click</code> 

Now look at this second example. Here you see we are defining the root element as the <code>document</code>. Which means that the click event will bubble all the way up the DOM tree and then fire if the element that was clicked has a class dynamic. This is equivalent to <code>.live</code>

Now, if in example one, at the time of binding the event the element was present in the DOM, the code would work just fine, as you can see <a href="http://jsfiddle.net/azizpunjani/bDQKW/" rel="nofollow">here</a>. 

That being said. Here's an except from the <a href="http://api.jquery.com/on/" rel="nofollow">docs</a> which clarifies the behavior above. 

<blockquote>
 Event handlers are bound only to the currently selected elements; they
 must exist on the page at the time your code makes the call to .on()
</blockquote>

So, in conclusion. Use the <code>document</code> element when you are sure that there's no parent element for the element you are selecting that's guaranteed to be in the DOM at the time th event is bound. If there is a parent element that is present then use that instead of the <code>document</code> element. This way the event will not have to bubble all the way up the <code>document</code>, it needs to travel only a short distance.

blocks|key|4905817|text|实际上，在这种情况下，最好的解决方案是既不使用$(document)，也不使用像$("selector")这样的特定元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4905818|最好的方法是使用元素的容器，并在on函数中绑定元素选择器。这样做可以避免不必要的事件冒泡到文档中。|4905819|因此，代码应该如下所示：|4905820|$("this_is_the_container").on('event','my_element_selector',function(){
//+do+some+stuff+here
})|code-block|syntax|javascript|4905821|entityMap^0|N|B|14|D|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|W|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|X|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

Actually the best solution in a case such as this is not using the <code>$(document)</code> neither the specific element like <code>$("selector")</code>.

The best approach is using the container of the element and bind the element selector in the on function. By doing this you avoid unnecessary event bubbling to the document.

So the code should look like:

<pre><code>$("this_is_the_container").on('event','my_element_selector',function(){
// do some stuff here
})
</code></pre>

blocks|key|868689|text|$(*selector*).on(*event*,+function(){})|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|868690|将仅适用于在脚本运行时已加载到页面中的元素。如果以后会出现新的元素，事件处理程序将无法工作。|unstyled|868691|$(document).on(*event*,+*selector*,+function(){}+|868692|将执行事件处理程序，即使具有相同选择器的元素将在脚本运行后出现在页面上。|868693|因此，如果您有一些元素，这些元素可能会在随机时间后出现，请使用|868694|$(document).on()|868695|否则使用|868696|$(*selector*).on();|868697|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$B|C]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$B|C]]|$1|S|3|-4|5|F|7|12|8|@]|9|@]|A|$]]]|T|$]]

<pre><code>$(*selector*).on(*event*, function(){})
</code></pre>

will apply only for elements which is already load in page at the moment of script run. If in future, will appear new elements, the event handler will be not work.

<pre><code>$(document).on(*event*, *selector*, function(){} 
</code></pre>

will execute event handler even the elements with same selector will appear on page after script run.

So, if you have some elements, which can appear after in random time, use 

<pre><code>$(document).on()
</code></pre>

else use 

<pre><code>$(*selector*).on();
</code></pre>

I'd like a jQuery expert in their own words to explain why the $(document) identifier is recommended by others for jQuery's on() statement vs just using an element itself

Example 1: Why is using $(document) here better then Example #2?

<pre><code>$(document).on("click", ".areaCodeList a", function(){
 // do stuff
});
</code></pre>

Example 2: Why is using the element this way considering not good practice compared to Example 1?

<pre><code>$(".areaCodeList a").on("click", function(){
 // do stuff
});
</code></pre>

When using jQuery on(), why use (document) vs. the element itself?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想请jQuery专家用他们自己的话来解释为什么其他人推荐$(document)标识符用于jQuery的on()语句，而不是仅仅使用元素本身示例1:为什么这里使用$(document)比示例2更好？$(document).on("click", ".areaCodeList a", function(){    // ...

问在()上使用jQuery时，为什么使用(document)而不是元素本身呢？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在()上使用jQuery时，为什么使用(document)而不是元素本身呢？EN