Зачем указывать «документ» или «тело» ДО привязки слушателя события jQuery? - PullRequest
Новая
       23

Зачем указывать «документ» или «тело» ДО привязки слушателя события jQuery?

0 голосов
/ 28 ноября 2018

В 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().

1 Ответ

0 голосов
/ 28 ноября 2018

Зачем использовать делегат прослушивателя событий?

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) Вы хотите, чтобы ваши привязки были съемными

Еще одна причина, по которой вы хотите использовать прослушиватели событий без делегатов, заключается в том, что они прикреплены к самим элементам.Таким образом, если вы удалите элемент, привязка также исчезнет.Хотя это может быть проблемой с динамическим контентом, когда вы хотите, чтобы привязка всегда была для элементов, могут быть случаи, когда вы хотите, чтобы это произошло.

...