В чем разница между этими параметрами?
$('[data-focus-link]').each( function() {
var $this = $(this);
var $focus_id = $this.attr('data-focus-link');
$this.click( function() {
$('#' + $focus_id).focus();
});
});
$(document).on('click', '[data-focus-link]', function() {
var $this = $(this);
var $focus_id = $this.attr('data-focus-link');
$('#' + $focus_id).focus();
});
Мне все равно, что использовать?
Использование $(document).on('click', '[data-focus-link]', function() { })
лучше по производительности, более заметно, если у вас есть много элементов, которые вы хотите прослушать для события "click", Он создает только 1 прослушиватель событий в document
и делегирует захваченное событие элементу, указанному селектором (например, [data-focus-link]
).
$('[data-focus-link]').each(function() {})
подход создавал бы n # прослушивателей событий, каждый из которых указывал бы копию анонимной функции, которую вы определили:
function() {
$('#' + $focus_id).focus();
}
Пройдите тест и убедитесь сами, попробуйте 10, 100, 1000, 10000 элементов, и вы увидите резкое падение производительности с помощью .each()
.
Если вы привязываетесь к щелчку, то после удаления элемента и его чтения (или добавления новых) связывания не будет.
Когда вы используете on, он проверяет все элементы в родительском (документе), поэтому нет никакой разницы при добавлении элементов.
Разница в том, что в первом случае вы повторяете элементы, которые уже есть в DOM и без какого-либо взаимодействия с пользователем.
Во втором случае вы делаете то же самое, но в событии клика, и вы будете выполнять итерацию через элементы, включая динамически добавленные
$(document).on
? Вы должны заботиться, что использовать?