Понимание событий 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)'). Лучшее решение вашей проблемы, я могу заверить вас, но нам может понадобиться больше контекста и кода, чтобы увидеть лучший способ помочь вам.

EDIT:

Вы можете посмотреть в jQuery's off() функцию, чтобы удалить события. Это может вам помочь.