javascript - 无论事件添加的顺序如何，如何强制 Javascript 事件首先运行？

Question

我有人们在他们的页面中包含的 Javascript。在我的 Javascript 中，我有一个 jQuery 版本(为了方便引用，为 1.8)，它被分成自己的命名空间，并通过全局变量引用(但不是“$”或“jQuery”这两个默认变量之一) 。这允许用户在他们的页面中使用 jQuery，并且不会干扰我在函数内部所做的事情。

所以我们有一个页面已经有 jQuery (1.4)，一切都工作正常，除了用户和我的代码都在监听元素上的“单击”事件，并且他们的事件先行，所以在少数事件上他们这样做返回 false，jQuery 停止传播，我的事件永远不会被触发。我需要先进行我的事件。用户期望我的 onClick 功能仍然有效。

现在我知道 jQuery 通过 _data() 对象在内部保留自己的事件顺序，通过这个可以取消绑定(bind)现有事件，绑定(bind)我的事件，然后重新绑定(bind)现有事件，但这仅适用于通过该 jQuery 实例绑定(bind)的对象。我不想只是盲目地寻找 jQuery 对象，希望冲突是由用户自己的 jQuery 版本引起的。毕竟，当用户不通过 jQuery 绑定(bind)事件时会发生什么？尝试操作页面中现有的 jQuery 对象并不是一个好的解决方案。

我知道，根据浏览器的不同，他们使用的是 addEventListener/removeEventListener 或 attachEvent/detachEvent。如果我可以获得已添加事件的列表，我就可以按照我想要的顺序重新绑定(bind)它们，但我不知道如何操作。通过 Chrome 检查查看 DOM，我没有看到 onclick 绑定(bind)在任何地方(不在对象上，也不在窗口或文档上)。

我正在费尽心思地试图弄清楚 jQuery 到底在哪里绑定(bind)了它的监听。为了能够控制它自己的事件的顺序，jQuery 必须全面监听某个地方，然后触发它自己的函数，对吧？如果我能弄清楚这是在哪里完成的，我可能会深入了解如何确保我的事件始终是第一位的。或者也许有一些我在 Google 上找不到的 Javascript API。

有什么建议吗？

Answer 1

我们通过添加一个小的 jQuery 扩展来解决这个问题，该扩展在事件链的头部插入事件:

$.fn.bindFirst = function(name, fn) {
  var elem, handlers, i, _len;
  this.bind(name, fn);
  for (i = 0, _len = this.length; i < _len; i++) {
    elem = this[i];
    handlers = jQuery._data(elem).events[name.split('.')[0]];
    handlers.unshift(handlers.pop());
  }
};

然后，绑定(bind)您的事件:

$(".foo").bindFirst("click", function() { /* Your handler */ });

简单!