jQuery如何调整绑定事件执行顺序？实现后绑定事件优先触发

这个场景我之前也碰到过，jQuery默认会按照事件绑定的先后顺序执行处理函数，所以先绑的console.log('1')会先触发，后绑的第三方库事件console.log('2')在后面。要反转这个顺序，咱们可以通过操作jQuery的内部事件存储来实现，下面给你两种可行的方法：

方法一：直接反转内部事件处理队列 #

jQuery会把每个元素的事件处理函数存在内部的事件列表里，咱们可以拿到这个列表并反转它的顺序：

// 你的第一个绑定事件
$('form').submit(function() { console.log('1'); });
// 第三方库绑定的第二个事件（模拟代码）
$('form').submit(function() { console.log('2'); });

// 获取表单DOM元素
const formElement = $('form')[0];
// 拿到submit事件的处理函数集合（注意：$._data是jQuery内部API，多数版本兼容）
const submitEventList = $._data(formElement, 'events')?.submit;

if (submitEventList) {
  // 反转处理函数的执行顺序
  submitEventList.reverse();
}

// 现在提交表单，会先输出2，再输出1

原理：jQuery的事件系统会按数组顺序依次调用处理函数，反转数组后，原本最后绑定的函数就会排在最前面被执行。

方法二：解绑后重新按目标顺序绑定 #

如果担心内部API的兼容性问题，可以先把所有处理函数提取出来，解绑原有事件，再按反转后的顺序重新绑定：

// 原有的两个事件绑定
$('form').submit(function() { console.log('1'); });
$('form').submit(function() { console.log('2'); });

const $form = $('form');
const formElement = $form[0];
const handlerList = [];

// 提取所有submit处理函数
const submitEventList = $._data(formElement, 'events')?.submit;
if (submitEventList) {
  // 把每个处理函数存入临时数组
  submitEventList.forEach(eventItem => handlerList.push(eventItem.handler));
  
  // 解绑所有submit事件
  $form.off('submit');
  
  // 按反转顺序重新绑定事件
  handlerList.reverse().forEach(handler => {
    $form.submit(handler);
  });
}

注意事项：

• 一定要等第三方库完成事件绑定后，再执行上述代码。如果第三方库是异步加载绑定的，可能需要用回调、Promise或者监听加载完成事件来确保时机正确。
• $._data是jQuery的内部私有API，虽然在绝大多数稳定版本中都能正常使用，但如果后续jQuery版本有大的架构变更，可能需要调整实现方式。

内容的提问来源于stack exchange，提问作者John Smith