javascript - 在事件委托(delegate)中传递 jQuery 对象

Question

// Snippet 1
$(document).on("keyup blur", "#selector_1_id", function() {
    // DO SOMETHING
});

$(document).on("keyup blur", "#selector_2_id", function() {
    // DO SOMETHING
});


// Snippet 2
var selector_1_id = $("input[name=selector_1_id]");
var selector_2_id = $("input[name=selector_2_id]");

$(document).on("keyup blur", selector_1_id, function() {
    // DO SOMETHING
});

$(document).on("keyup blur", selector_2_id, function() {
    // DO SOMETHING
});

为什么这些片段的行为似乎有所不同？虽然第一个实际上看起来很理想，那就是 keyup 和 blur 实际上在 keyup 和 blur 事件上应用在选择器上，而另一个似乎没有那么理想地工作，它的行为就像代码片段一直在运行。

我正在使用 JavaScript 在实时网站上启用和禁用输入类型。

Answer 1

您不能像那样通过该函数传递元素，它必须是 string 选择器。

$(document).on("keyup blur", selector_2_id, function() {
    // DO SOMETHING
});

不会工作，事实上 keyup 和 blur 每次都会在文档而不是选择器上触发

如果您在变量中有该元素，则无需执行此操作，因为无论如何您都有对该元素的引用，您只有在可以随时添加该元素并且您没有对它的引用时才使用它。

所以

selector_2_id.on('keyup blur', function() {
   // DO SOMETHING
});

应该可以完美地工作。

深入观察

A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

那么这个是什么意思呢

$(document).on('keyup blur', selector_2_id, function(){
  ^------^ = 1               ^-----------^ = 2
});

如果2为null或省略，则1将用于事件