Понимание событий JavaScript и применение событий / плагинов jQuery?

Question

У меня есть несколько функций jQuery, которые используют событие.on, потому что я хочу предотвратить повторное применение события к тому же элементу.

Однако некоторые люди создали плагины (например, Owl Carousel), и я не знаю, как предотвратить повторное применение этого события.

В настоящее время я использую плагин следующим образом:

HTML:

<div class="init-owl"></div>

JS:

$('.init-owl').owlCarrousel();
$('.init-owl').removeClass('init-owl');

Всякий раз, когда второй элемент загружается на страницу с использованием, например, AJAX, я хочу применить событие только к вновь добавленному элементу.

1. Вопрос: Что я не понимаю, так это то, как событие застревает в DOM?

2. Чтобы лучше понять происходящее, мне было интересно, как событие вообще связано с DOM?

3. Есть ли лучший способ предотвратить применение событий к тем же элементам DOM?

Если я хочу написать свои собственные плагины, мне нужно знать, как работает javascript, верно?

Answer 1

Вопрос: Что я не понимаю, так это то, как событие застревает в DOM?

Как только событие привязано к объекту, оно удаляется, когда объект собирают. Так что, если элемент DOM действительно пропал и на него нет ссылок, событие также будет подметено.

Чтобы лучше понять происходящее, мне было интересно, как событие вообще связано с DOM?

Я не уверен, как далеко вы хотите погрузиться в это. Возможно, это поможет, если вы перестанете думать о DOM и событиях и будете больше смотреть на обычные события, связанные с объектами. По существу, объект что-то делает, или что-то с ним делается, и некоторый базовый код (в данном случае в коде браузера) запускает событие для этого объекта. Реализации между браузерами могут отличаться, но в основном у вас будет ключ или строка (имя события), которые сопоставляются с набором функций. Когда вы добавляете прослушиватель событий, вы добавляете еще одну функцию в эту коллекцию. Затем, когда что-то вызывает это событие, оно выполняет итерации по функциям и выполняет их. Это реальное базовое объяснение, но я надеюсь, что это немного прояснит ситуацию.

Есть ли лучший способ предотвратить применение событий к тем же элементам DOM?

Убедитесь, что вы не добавляете события снова, написав лучший код. Я не верю, что вы можете погрузиться в элемент и посмотреть, связаны ли с ним события. Однако вы можете изменить селектор jQuery так, чтобы он предназначался только для новых добавленных элементов. Если вам нужно, пометьте элементы, к которым вы добавили события, классом или чем-то еще. Тогда вы можете нацелить свои элементы, выполнив $('.init-owl:not(.already-bound)'), Уверяю вас, есть лучшее решение вашей проблемы, но нам может понадобиться больше контекста и кода, чтобы найти лучший способ помочь вам.

РЕДАКТИРОВАТЬ:

Вы можете посмотреть в JQuery'soff() функция для удаления событий. Это может помочь вам тоже.