为什么在绑定jQuery事件侦听器之前指定“文档”或“正文”？

Question

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

但是我不明白，在侦听事件之前为此指定“正文”或“文档”的目的是什么？

考虑以下代码：

$(".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”绑定到具有“ 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

  

为什么要使用委托事件监听器？

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>

  

为什么在委托事件侦听器上使用非委托事件侦听器？

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

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