что используется делегатом, что я не могу отличить

80
5

В деле "JQuery" я не могу понять это делегирование событий. Любая помощь по этому поводу?

что, если я использую,

Дело 1

$( "table td" ).on( "click", function() {
$( this ).toggleClass( "chosen" );
});

случай 2

$( "table" ).delegate( "td", "click", function() {
$( this ).toggleClass( "chosen" );
});

Оба будут выполнять ту же работу. Если да, в чем основное отличие? [Я не могу понять]. Что-то связано с "Событием Bubbling"? пожалуйста

спросил(а) 2015-05-07T16:51:00+03:00 5 лет, 4 месяца назад
1
Решение
98

Практическое отличие состоит в том, что delegate (и три-аргумент on) может привести слушателей применять к элементам, которые еще не существуют.

$( "table td").on( "click",...) прикрепляет слушателя к каждому элементу, который соответствует селектору table td, который существует во время вызова. Если после этого вызова добавляется td на страницу, к нему не будет подключен слушатель.

$( "table").delegate( "td", "click",...) прикрепляет слушателя к каждой table которая существует во время вызова, и что слушатель запускается только тогда, когда подэлемент td этого элемент table щелкнут.

$("button").click(function() {
$("tr").append("<td>I am added after page-load time and am not targeted by load-time scripts. The listener that fires an alert does not apply to me, because I didn't exist when the <code>$('table td').click</code> code ran. However, the delegated listener still aplies, so I will turn red when you click me.</td>");
})

$("table td").on("click", function() { alert("hi"); });

$("table").delegate("td", "click", function() { $(this).css("color", "red"); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:70%";>
<tr>
<td>I am targeted by non-delegated event listeners set at page-load time. Click this text to trun this text red and see an alert.</td>
</tr>
</table>
<button>Add another td</button>

Делегирование работает, потому что, когда вы нажимаете дочерний элемент (например, td), вы на самом деле щелкнули всех своих родителей (например, table и body). (Для сравнения с человеком: вы не можете вытащить руку человека, не выталкивая этого человека в целом.) Когда слушатель клика срабатывает для родителя, событие имеет свойство target которое указывает, какой элемент был исходной целью мероприятие.

document.getElementById("theDiv").addEventListener("click", function(e) {
if(e.target != this) {
e.target.style.color = "red";
}
});
<div id="theDiv">
<span>I'm a span, inside of a div</span><br/>
<span>I'm another span, inside of a div</span><br/>
<span>I'm a third span, inside of a div</span>
</div>

Обратите внимание, что в этом примере мы добавляем только один прослушиватель на <div>. Когда мы нажимаем <span>, событие click также применяется к родительскому <div>. Мы используем event.target чтобы позволить слушателю <div> выяснить, какой из его детей был нажат.

ответил(а) 2015-05-07T17:32:00+03:00 5 лет, 4 месяца назад
40

Случай 1 связывает обработчик onclick для всех узлов <td>, которые уже присутствуют в DOM в момент привязки этого обработчика. Если вы решите добавить еще один <td> динамически в свою таблицу, обработчик события не будет вызываться для этого нового <td>.

Случай 2, который на самом деле должен выглядеть так (поскольку As of jQuery 1.7,.delegate() has been superseded by the.on() method):

$( "table" ).on( "click", "td", function() {
...
});

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

Дополнительная информация: https://learn.jquery.com/events/event-delegation/

ответил(а) 2015-05-07T17:22:00+03:00 5 лет, 4 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема