javascript - 了解 JavaScript 事件并应用 jQuery 事件/插件？

Question

我有一堆使用 .on 事件的 jQuery 函数，因为我想防止将该事件重新应用到同一元素。

但是有些人创建了插件(例如 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

Question: What I dont understand is how the event stays stuck to the DOM?

一旦事件绑定(bind)到对象，当对象被垃圾回收时，事件就会被删除。因此，如果 DOM 元素确实消失了并且没有对它的引用，那么该事件也会被清除。

To better grip what is happening, I was wondering how an event in general gets connected to the DOM?

我不确定您想深入研究这个问题到什么程度。如果您停止考虑 DOM 和事件并更多地关注绑定(bind)到对象的常规事件，也许会有所帮助。基本上，一个对象会执行某些操作，或者对其执行某些操作，并且某些底层代码(在本例中为浏览器的代码)会触发该对象上的事件。浏览器之间的实现可能有所不同，但基本上您将有一个映射到函数集合的键或字符串(事件名称)。添加事件监听器时，您会向此集合添加另一个函数。然后，当某些事件触发该事件时，它会迭代函数并执行它们。这是一个真正的基本解释，但我希望它能让事情变得更加清晰。

Is there a better way to prevent events applying to the same DOM elements?

通过编写更好的代码确保您不会再次添加事件。我不相信您可以深入研究一个元素并查看它是否有绑定(bind)的事件。但是，您可以更改 jQuery 选择器以仅定位新添加的元素。如果必须，请使用类或其他内容标记已添加事件的元素。然后，您可以通过执行 $('.init-owl:not(.already-bound)') 来定位您的元素。我可以向您保证，您的问题有更好的解决方案，但我们可能需要更多上下文和代码才能找到更好的方法来帮助您。

编辑:

您可以查看jQuery's off()删除事件的函数。这也可能对你有帮助。