javascript - 为什么在绑定(bind) jQuery 事件监听器之前指定 "document"或 "body"？

Question

在 jQuery 中，有多种方法可以将操作绑定(bind)到事件，并为它们添加监听器。有了这个我没有问题。

但我无法理解的是，在监听事件之前指定“正文”或“文档”的目的是什么？

考虑以下代码:

$(".example-button").click(function() {
  $(this).text("I have been clicked");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="example-button" role="button" type="button">I have not been clicked yet.</button>
<button class="example-button" role="button" type="button">I have not been clicked yet.</button>

这会将事件“click”绑定(bind)到类为“example-button”的按钮，当它们被单击时，它将更改相应的按钮文本以让您知道。

但是，我经常看到程序员(通常是经验丰富的程序员)编写以下代码:

$("body").on("click", ".example-button", function() {
  $(this).text("I have been clicked");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="example-button" role="button" type="button">I have not been clicked yet.</button>
<button class="example-button" role="button" type="button">I have not been clicked yet.</button>

这实现了与第一个代码块相同的感知效果。

我的问题是，为什么？

更具体地说，为什么将其绑定(bind)到文档或正文，然后检查其点击情况？这不是多了一段多余的代码吗？

为了证明这一点，我提出了这样的理论:也许通过指定点击绑定(bind)到正文将确保正文已加载 - 但这是不正确的 $("body").on("click ") 等不等于 $(document).ready()。

任何人都可以对此提供更多见解吗？我似乎无法在 jQuery 文档中找到我的答案，因为它默认假设我正在寻找上述

$(document).ready().

Answer 1

Why use a delegate event listener?

1) 内容尚不存在

//#container is empty, but we will create children in the future
//we can use a delagate now that will handle the events from the children
//created later
$('#container').on('click', '.action', function (e) {
  console.log(e.target.innerText);
});

//lets create a new action that didn't exist before the binding
$('#container').append('<button class="action">Hey!  You Caught Me!</button>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

2) 内容存在，但发生变化

//#container has an existing child, but it only matches one of our
//delegate event bindings.  Lets see what happens when we change it
//so that it matches each in turn

$('#container').on('click', '.action:not(.active)', function (e) {
  console.log('Awww, your not active');
  $(e.target).addClass('active');
});

$('#container').on('click', '.action.active', function (e) {
  console.log('Hell yeah!  Active!');
  $(e.target).removeClass('active');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <button class="action">Hey! You Caught Me!</button>
</div>

Why use a non-delegate event listener over a delegate event listener?

1) 内容是静态且预先存在的

要么是因为您知道内容是静态的并且不会改变，并且您不需要内容。否则，您可能更喜欢使用委托(delegate)，这作为开发人员的偏好是没问题的。

2) 可以防止事件冒泡

但是，使用非委托(delegate)事件监听器也可以与委托(delegate)结合使用来阻止操作。考虑以下因素:

//#container has three children.  Lets say we have a delegate listener for
//the buttons, but we only want it to work for two of them.  How could we
//use a non-delegate to make this work?

//delegate that targets all the buttons in the container
$('#container').on('click', 'button', function (e) {
  console.log('Yeah!');
});

$('.doNotDoSomething').on('click', function (e) {
  console.log('Do not do the delegate logic');
  
  //by stopping the propagation of the click event, it will not bubble up
  //the DOM for the delegate event handler to process it.  In this way, we
  //can prevent a delegate event handler from working for a nested child.
  e.stopPropagation();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <button class="doSomething">Do It!</button>
  <button class="doNotDoSomething">Nooooo!</button>
  <button class="doSomethingElse">Do This Instead!</button>
</div>

3) 您希望绑定(bind)可移除

可能想要使用非委托(delegate)事件监听器的另一个原因是它们附加到元素本身。因此，如果删除该元素，绑定(bind)也会随之消失。虽然这可能是动态内容的问题，您希望元素的绑定(bind)始终存在，但在某些情况下您可能希望发生这种情况。