bootd
@bootd
Гугли и ты откроешь врата знаний!

В чем разница написания таких событий клика у jquery?

Поясните, в чем разница написания всех этих событий между собой:
1)
$('body').on('click','#link1',function(){
...
});


2)
$('#link1').on('click',function(){
...
});


3)
$('#link1').click(function(){
...
});
  • Вопрос задан
  • 3410 просмотров
Решения вопроса 1
@IoannGrozny
Front-end разработчик
1. Делегирование события. Необходим, когда у вас имеются динамические манипуляции с контентом. Такие конструкции, как правило, более производительны, т.к. событие навешивается один раз на родительский элемент. Может не сработать, если у вас прерывается всплытие(об этом забывать нельзя):
<body>
    <div class='no-bubble'>
        <p class='click-target'></p>
    </div>
</body>

// клик по .click-target не сработает никогда!
$('body').on('click','.click-target', function(){
    // do something...
});
$('body').on('click','.no-bubble', function(e){
    e.stopPropagation();
});

2 и 3 работают аналогично друг другу, но за небольшим исключением:
$('#id').click();
// не равносильно:
$('#id').on('click');
// а работает как:
$('#id').trigger('click');
// т.е. не навешивает обработчик клика, а эмулирует клик по объекту.

А кроме того, 1 и 2 варианты позволяют делать так:
$('id').on('click mouseover mouseout', function(e) {
   if (e.type === 'click') {
        // обработать клик...
   } else if (e.type === 'mouseover') {
       // ну принцип понятен, да?..
   }
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Sanasol
@Sanasol
нельзя просто так взять и загуглить ошибку
1 и 2 почти тоже самое, не могу вспомнить в чем прикол, но в некоторых контекстах второй вариант не срабатывает как должен, но по сути разница в контексте. Можно указать где распологается элемент на который вашается событие, при наличии одинакового селектора.

разница между 1-2 и 3 в том что если элементы на которые вешается событие подгружаются или создаются через ajax/js, то третий вариант не будет работать.
То есть третий вариант сработает только для элементов которые уже есть на данный момент на странице.
1 и 2 работают в живом режиме и будут автоматически вешаться на элементы которые так или иначе появились на странице в любой момент.
Ответ написан
@Elizavetta
Matroid: gamedev/js-разработка
Александр Аксентьев Типа того, но если быть точнее, то
вот так работает нативная делегация событий jspro.ru/post/kak-rabotaet-delegatsyia-sobytyi-v-j... А первый вариант ставит делегацию на соответствующий элемент. Второй вариант, по сути, можно убрать из списка, во избежание багов.
Когда происходит выполнение кода типа
$('#link1').click(function(){
...
});

eventListener навешиваются на сам элемент, и при удалении элемента из DOM все его хэндлеры удаляются. В таком случае можно их программно устанавливать снова, либо делать делегацию для элементов, которые точно не покинут DOM.
Ответ написан
aen
@aen
Keep calm and 'use strict';
Третий вариант это всего лишь алиас ко второму варианту. Если выбирать между ними, то лучше использовать второй.

Первый вариант это делегирование обработки события одному из родительских контейнеров.

Тут нужно говорить о "всплытии" событий. Если у вас произошло событие "click" на каком-то элементе, то вы его сможете обработать как на самом элементе (случаи 2 и 3), так и на любом родителе (случай 1), так как это событие "всплывает", то есть вызывается на всех родителях до тех пор, пока оно не достигнет document.

Первый способ имеет смысл применять в случаях, когда в момент определения обработчиков события самого элемента, на котором будет это событие, попросту нет в DOM.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы