jQuery文档声明您需要将选择器作为字符串传递给.on（）方法。 例如：
$('#someEl').on('click', '.clickable', function() { /* ... */ });但是，当您传入单个节点时，SEEMS也可以工作：
var someNode = getElementById('someNode'); $('#someEl').on('click', someNode, function() { /* ... */ });当我尝试传入jQuery对象时，就我所知，它有点失败，并将其视为直接绑定而不是委托绑定：
var $someNode = $('#someNode'); $('#someEl').on('click', $someNode, function() { /* ... */ }); // seemed to act as: $('#someEl').on('click', function() { /* ... */ });所以我猜这些问题是：
传入DOM节点只是不是API的文档部分吗？ 或者我在API文档中错过了它？
缓存节点（不是jQuery对象包装的节点）有什么好处，还是jQuery最终做了相同的工作量？ （换句话说，我可以假设当我传递一个选择器字符串，它解析它，找到有效的节点，然后执行绑定...但是如果我提供一个很好的新DOM节点，它将在这个阶段传递，或者是否仍然出于某种原因在上班前用jQuery包装？）
我错了jQuery对象是无效的候选人吗？ 我在考试中错过了什么？ 愚蠢的是，如果我已经缓存了jQ对象，我必须再次提供一个选择器（让它再次完成整个选择过程），而不是能够使用我已经完成的工作......？
The jQuery documentation states that you need to pass in a selector as a string to the .on() method. For example:
$('#someEl').on('click', '.clickable', function() { /* ... */ });However, it SEEMS to work when you pass in an individual node as well:
var someNode = getElementById('someNode'); $('#someEl').on('click', someNode, function() { /* ... */ });When I tried passing in a jQuery object, it sort of failed out as far as I can tell, and treated it as a direct binding instead of a delegated binding:
var $someNode = $('#someNode'); $('#someEl').on('click', $someNode, function() { /* ... */ }); // seemed to act as: $('#someEl').on('click', function() { /* ... */ });So I guess the questions are:
Is passing in a DOM node just not a documented part of the API? Or did I miss it in the API docs?
Is there a benefit to caching the node (not the jQuery object-wrapped node), or does jQuery ultimately do the same amount of work? (in other words, I can assume when I pass a selector string that it parses it, finds the valid nodes, and then performs the binding... but if I provide it a nice fresh DOM node will it pass on this stage, or does it still for some reason wrap things up in jQuery before going to work?)
Am I wrong about the jQuery object being an invalid candidate? Did I just miss something in my testing? It seems silly that if I'm already caching jQ objects, that I'd have to supply a selector again (making it do the whole selection process again) rather than being able to use what I've already done...?
最满意答案
要回答你的主要问题，不，选择器应该是一个字符串，或者是undefined 。 您所看到的是jQuery如何尝试猜测您正在使用哪种调用约定的怪癖 - 稍后会对此进行更多介绍。
遗憾的是，没有办法传递DOM元素而不是选择器。 如果delegate是你的处理程序绑定的元素，而target是触发事件的元素，jQuery将始终使用提供的选择器搜索delegate的后代，并检查target是否在匹配的选择中。 如果jQuery允许某种方式来传递DOM节点而不是选择器，那么肯定会有性能优势。
好吧，在使用$('#someEl').on('click', '.clickable', handler)你从来没有选择匹配.clickable元素，jQuery也不会在那个阶段，所以你不做那里的工作倍增。
您可以通过多种方式调用.on() ，尤其是因为有多个可选参数（选择器，数据）。
当你调用.on(type, notAString, handler) jQuery假设你正在使用调用约定： .on(type, data, handler) - 它转换为.on(type, undefined, data, handler) 。
以下是您建议的电话的演示： http ： //jsfiddle.net/BGSacho/HJLXs/1/
HTML：
<div id="someEl"> <div id="someNode" class="clickable">Click me!</div> </div>JavaScript的：
$(document).ready(function () { function display(event) { console.log("event.currentTarget", event.currentTarget); console.log("event.delegateTarget:", event.delegateTarget) console.log("event.data:", event.data); } $('#someEl').on('click', ".clickable", function (event) { console.log("I am .on(type, selector, fn) - my currentTarget should be .clickable and my delegateTarget should be #somEl - this demonstrates that jQuery is using the event delegation mechanism. I have no data bound to my event."); display(event); }); $('#someEl').on('click', document.getElementById('someNode'), function (event) { console.log("I'm .on(type, data, handler) - my currentTarget should be #someEl because I'm not using a delegation mechanism. I also have some data bound.") display(event); }); $('#someEl').on('click', $('#someNode'), function (event) { console.log("I'm still .on(type, data, handler)"); display(event); }); });它们似乎都可以工作，因为你不在处理代码中使用this （aka event.currentTarget ）。 我不确定为什么你用jQuery对象和DOM节点获得不同的结果。
To answer your main question, no, selectors are supposed to be a string, or undefined. What you're seeing is a quirk of how jQuery tries to guess which calling convention you are using - more on this in a bit.
There's no way to pass a DOM element instead of a selector, sadly. If delegate is the element that your handler was bound to, and target is the element that fired the event, jQuery will always search delegate's descendants using the selector provided, and check if target is in the matched selection. If jQuery allowed some way to pass DOM nodes instead of a selector, there definitely would be a performance benefit.
Well, in the usage $('#someEl').on('click', '.clickable', handler) you've never selected elements matching .clickable, and neither would jQuery at that stage, so you're not doing the work doubly there.
You can call .on()in multiple ways, especially since there are multiple optional parameters(selector, data).
When you call .on(type, notAString, handler) jQuery assumes you are using the calling convention: .on(type, data, handler) - which it translates to .on(type, undefined, data, handler).
Here is a demonstration of what your suggested calls do: http://jsfiddle.net/BGSacho/HJLXs/1/
HTML:
<div id="someEl"> <div id="someNode" class="clickable">Click me!</div> </div>JavaScript:
$(document).ready(function () { function display(event) { console.log("event.currentTarget", event.currentTarget); console.log("event.delegateTarget:", event.delegateTarget) console.log("event.data:", event.data); } $('#someEl').on('click', ".clickable", function (event) { console.log("I am .on(type, selector, fn) - my currentTarget should be .clickable and my delegateTarget should be #somEl - this demonstrates that jQuery is using the event delegation mechanism. I have no data bound to my event."); display(event); }); $('#someEl').on('click', document.getElementById('someNode'), function (event) { console.log("I'm .on(type, data, handler) - my currentTarget should be #someEl because I'm not using a delegation mechanism. I also have some data bound.") display(event); }); $('#someEl').on('click', $('#someNode'), function (event) { console.log("I'm still .on(type, data, handler)"); display(event); }); });They might all seem to work because you don't use this(aka event.currentTarget) in your handling code. I'm not sure why you are getting different results with a jQuery object and a DOM node.
更多推荐
发布评论