javascript - 用作委托(delegate)人时传递到 .on 的有效候选人

Question

jQuery 文档指出您需要将选择器作为字符串传递给 .on() 方法。例如:

$('#someEl').on('click', '.clickable', function() { /* ... */ });

但是，当您传入单个节点时，它似乎也可以工作:

var someNode = getElementById('someNode');
$('#someEl').on('click', someNode, function() { /* ... */ });

当我尝试传入一个 jQuery 对象时，据我所知它有点失败，并将其视为直接绑定(bind)而不是委托(delegate)绑定(bind):

var $someNode = $('#someNode');
$('#someEl').on('click', $someNode, function() { /* ... */ });

// seemed to act as:

$('#someEl').on('click', function() { /* ... */ });

所以我想问题是:

1. 传入的 DOM 节点不是 API 的记录部分吗？还是我在 API 文档中遗漏了它？

2. 缓存节点(而不是 jQuery 对象包装节点)是否有好处，或者 jQuery 最终会做同样数量的工作？ (换句话说，我可以假设当我传递一个选择器字符串时，它会解析它，找到有效节点，然后执行绑定(bind)......但是如果我为它提供一个不错的新 DOM 节点，它会在这个阶段传递，或者它仍然出于某种原因在开始工作之前用 jQuery 包装东西吗？)

3. 关于 jQuery 对象是无效候选者，我错了吗？我只是在测试中遗漏了什么吗？这似乎很愚蠢，如果我已经在缓存 jQ 对象，我必须再次提供一个选择器(让它再次执行整个选择过程)而不是能够使用我已经完成的......？

Answer 1

委托(delegate)有两个目的:

• 在父元素上为触发事件时共享相同逻辑的多个子元素设置单个事件处理程序。这应该会消耗较少的内存，但只有在用于替换大量单独的事件处理程序时才会产生明显的差异。我怀疑这就是您要实现的目标。

• 为绑定(bind)时 DOM 中不存在的元素定义事件处理程序。

现在，回答您的问题:

1. 没有记录传递 DOM 节点，因此不应使用它。虽然你说它有效，但 jQuery 是在愚弄你。通过查看 the source code ，它似乎只是因为事件冒泡才起作用，但处理程序中的 this 值将成为容器(参见 demo )。

2. 你说:

   I can assume when I pass a selector string that it parses it, finds the valid nodes, and then performs the binding

   这是一个错误的假设。您始终绑定(bind)到调用 .on 的元素(或多个元素)。您传递的选择器仅用于检查它是否匹配浏览器提供的事件对象的 currentTarget 属性。

3. 我在 #2 中所说的同样适用于此:jQuery 不会根据您传递的选择器选择任何内容，它只会根据该选择器检查 currentTarget。