jQuery：同一事件的多个处理程序

在前端开发中，我们经常需要给一个元素添加多个事件处理程序。在 jQuery 中，我们可以使用 .on() 方法来实现这个功能。

基本语法

$(selector).on(event, handler1);
$(selector).on(event, handler2);
$(selector).on(event, handler3);

我们可以连续调用 .on() 方法，并传入不同的事件处理程序函数，从而为同一个元素绑定多个事件处理程序。

示例代码

<button id="btn">点击我</button>

// 给按钮添加两个事件处理程序
$('#btn').on('click', function() {
  console.log('处理程序函数1');
});

$('#btn').on('click', function() {
  console.log('处理程序函数2');
});

当我们点击按钮时，控制台就会输出以下内容：

处理程序函数1
处理程序函数2

指导意义

• 在处理复杂交互逻辑时，我们可以将不同的功能拆分到独立的事件处理程序中，使代码更加清晰易懂。
• 多个事件处理程序执行顺序是按照它们绑定的顺序依次执行的。
• 可以使用 .off() 方法来解除绑定的某个或所有事件处理程序。

总之，jQuery 提供了非常方便的方式来实现同一事件的多个处理程序绑定。我们可以根据业务需求来合理利用这个功能，让代码更加优雅。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10278