为什么在绑定 jQuery 事件侦听器之前指定 "document" 或 "body"？

Question

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

但我不明白的是，在监听事件之前指定 "body" 或 "document" 的目的是什么？

考虑以下代码：

$(".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" 绑定到带有 class "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>

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

我的问题是，为什么？

更具体地说，为什么将其绑定到文档或正文，然后检查点击次数？那不是多了一段冗余代码吗？

为了证明这一点，我想出了一个理论，也许通过指定点击绑定到主体将确保主体已加载 - 但这是不正确的 $("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) 内容是静态的并且是预先存在的

要么因为你知道内容是静态的，不会改变，你也没有这个需求。否则，您可能更喜欢使用委托，这作为开发人员的偏好很好。

2) 可以防止事件冒泡

但是，使用非委托事件侦听器也可以与委托一起使用以防止操作。考虑以下因素：

//#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) 您希望您的绑定是可移动的

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

为什么在绑定 jQuery 事件侦听器之前指定 "document" 或 "body"？

Why specify "document" or "body" BEFORE binding a jQuery event listener?

javascript

jquery

events

event-delegation

1) 内容尚不存在

2) 内容存在，但有变化

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

2) 可以防止事件冒泡

3) 您希望您的绑定是可移动的