在前端开发中，我们通常需要为 DOM 元素添加事件监听器来响应用户交互。而使用 jQuery 库可以让这个过程更加简单和高效。然而，在使用 jQuery 时，你可能会遇到一个问题：当你连续添加多个相同类型的事件监听器时，它们是否会覆盖之前添加的监听器？
短答案：
不会。jQuery 会将每个添加的事件监听器都存储在内部列表中，并按照添加顺序依次执行它们。
长答案：
jQuery 提供了多种方法来为元素添加事件监听器，其中最常用的是 on() 和 bind() 方法。这两个方法的行为类似，都可以用于添加事件监听器，但是建议使用 on() 方法，因为它具有更广泛的适用性。
假设我们要为按钮元素添加 click 事件监听器，代码如下所示：
----------------------- ---------- - --------------------- ---- --- ----------------------- ---------- - --------------------- ---- ---
上述代码会为所有的按钮元素添加两个 click 事件监听器，分别输出 'listener 1' 和 'listener 2'。这两个监听器都会被执行，且执行顺序与添加顺序一致。
------------- -----------
如果你还想添加第三个监听器，可以再次使用 on() 方法：
----------------------- ---------- - --------------------- ---- ---
这样，所有的三个监听器都会被执行。
另外，如果你希望删除之前添加的某个事件监听器，可以使用 off() 方法：
------------------------ -----------
其中 listener1 是之前添加的一个函数，它将从内部列表中移除，并且不再执行。
指导意义：
通过以上示例代码和讲解，我们可以得出以下几点指导意义：
- jQuery 不会覆盖同一事件的先前监听器，而是按照添加顺序执行它们。
- 使用
on()方法来添加事件监听器，同时可以随时添加或删除监听器。 - 如果需要更复杂的事件处理逻辑，建议在线下使用原生 JavaScript 代码编写事件处理程序。
最后，记住：当你在编写前端代码时，思考清楚每个事件监听器的目的和行为，避免冗余和混乱的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30724