无论事件添加的顺序如何，如何强制Javascript事件先运行?

我们通过添加一个小的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());
  }
};

然后，绑定你的事件:

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

容易peasy !

正如Bergi和Chris Heald在评论中所说，事实证明没有办法从DOM中获得现有的事件，也没有方法"首先"插入事件。它们是按照设计插入的顺序触发的，也是按照设计隐藏的。正如一些海报所提到的，你可以通过jQuery的数据访问通过jQuery的相同实例添加的内容，但仅此而已。

还有另外一种情况，你可以在代码运行之前绑定的事件之前运行，那就是他们使用了"onclick" HTML属性。在这种情况下，您可以编写一个包装器函数，正如下面一个相当夸张的注释所指出的那样。虽然这在我问的原始问题的实例中没有帮助，而且现在非常少见事件以这种方式绑定(大多数人和框架现在在下面使用addEvent或attachEventListener)，但这是一个可以解决"先运行"问题的场景，并且由于很多人现在访问这个问题寻找答案，我想我会确保答案是完整的。

我遇到了一个相反的情况，我被要求在我们的网站上包含一个使用event.stopImmediatePropagation()元素的库。因此，跳过了一些事件处理程序。以下是我所做的(在这里回答):

<span onclick="yourEventHandler(event)">Button</span>

警告:这是不是绑定事件的推荐方式，其他开发人员可能会因此而杀了你。

<div>
    <div id="target"></div>
</div>
target.parentNode.addEventListener('click',()=>{console.log('parent capture phase handler')},true)

addEventListener的第三个参数表示:

• true -捕获阶段
• 假气泡相

有用的链接:https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

https://javascript.info/bubbling-and-capturing

Aliaksei Pavlenkos关于useCapture的建议可以使用。他断言它必须附加到父节点是错误的:MDN

"捕获"阶段的事件侦听器在任何非捕获阶段的事件侦听器之前被调用

target.addEventListener(type, listener, useCapture);

发现最容易将addListener和removeListener方法添加到document(因为这只是我需要它们的地方-我想你可以使用Element.prototype和this代替)。只有一个"真正的"。每个类型都添加侦听器，它只是一个按顺序调用实际侦听器的函数。eventListeners字典被添加到文档(因此可以与处理程序或顺序混淆)。

[编辑]我认为大多数情况下的正确答案是使用addEventListener的第三个参数:https://stackoverflow.com/a/29923421。下面的答案忽略了参数(故意)。

[edit]更新代码，只添加一个额外属性:document.eventHandlers +修改命名。

// Storage.
document.eventListeners             = {};   // { type: [ handlerFunc, listenerFuncs ] }
// Add event listener - returns index.
document.addListener                = (type, listener, atIndex) => {
    // Get info.
    const listening                 = document.eventListeners[type];
    // Add to existing.
    if (listening) {
        // Clean up.
        atIndex                     = atIndex || 0;
        const listeners             = listening[1];     // Array of funcs.
        // Already has.
        const iExists               = listeners.indexOf(listener);
        if (iExists !== -1) {
            // Nothing to do.
            if (iExists === atIndex)
                return              atIndex;
            // Remove from old position.
            listeners.splice(atIndex, 1);
        }
        // Add (supporting one cycle of negatives).
        const nListeners            = listeners.length;
        if (atIndex > nListeners)
            atIndex                 = nListeners;
        else if (atIndex < 0)
            atIndex                 = Math.max(0, atIndex + nListeners + 1);
        listeners.splice(atIndex, 0, listener);
    }
    // New one.
    else {
        // Handler func.
        const handler               = (...args) => {
            const listening         = document.eventListeners[type];
            if (listening) {
                const listeners     = listening[1];     // Array of funcs.
                for (const listener of listeners)
                    listener(...args);
            }
        };
        // Update dictionary.
        document.eventListeners[type]   = [ handler, [ listener ] ];
        // Add listener.
        document.addEventListener(type, handler);
        // First one.
        atIndex                     = 0;
    }
    // Return index.
    return                          atIndex;
};
// Remove event listener - returns index (-1 if not found).
document.removeListener             = (type, listener) => {
    // Get info.
    const listening                 = document.eventListeners[type];
    if (!listening)
        return                      -1;
    // Check if exists.
    const listeners                 = listening[1];
    const iExists                   = listeners.indexOf(listener);
    if (iExists !== -1) {
        // Remove listener.
        listeners.splice(iExists, 1);
        // If last one.
        if (!listeners.length) {
            // Remove listener.
            const handlerFunc       = listening[0];
            document.removeEventListener(type, handlerFunc);
            // Update dictionary.
            delete                  document.eventListeners[type];
        }
    }
    // Return index.
    return                          iExists;
}

正如所说，我认为如果您覆盖这些函数的本机实现，这可能是可能的。当开发一个库来替代现有实现时，这是一个非常糟糕的做法，因为它很容易与其他库发生冲突。

然而，为了完整起见，这里有一种可能性(完全未经测试，只是演示一般概念):

// override createElement()
var temp = document.createElement;
document.createElement = function() {
    // create element
    var el = document.createElement.original.apply(document, arguments);
    // override addEventListener()
    el.addEventListenerOriginal = el.addEventListener;
    el._my_stored_events = [];
    // add custom functions
    el.addEventListener = addEventListenerCustom;
    el.addEventListenerFirst = addEventListenerFirst;
    // ...
};
document.createElement.original = temp;
// define main event listeners
function myMainEventListeners(type) {
    if (myMainEventListeners.all[type] === undefined) {
        myMainEventListeners.all[type] = function() {
            for (var i = 0; i < this._my_stored_events.length; i++) {
                var event = this._my_stored_events[i];
                if (event.type == type) {
                    event.listener.apply(this, arguments);
                }
            }
        }
    }
    return myMainEventListeners.all[type];
}
myMainEventListeners.all = {};
// define functions to mess with the event list
function addEventListenerCustom(type, listener, useCapture, wantsUntrusted) {
    // register handler in personal storage list
    this._my_stored_events.push({
        'type' : type,
        'listener' : listener
    });
    // register custom event handler
    if (this.type === undefined) {
        this.type = myMainEventListeners(type);
    }
}
function addEventListenerFirst(type, listener) {
    // register handler in personal storage list
    this._my_stored_events.push({
        'type' : type,
        'listener' : listener
    });
    // register custom event handler
    if (this.type === undefined) {
        this.type = myMainEventListeners(type);
    }
}
// ...

在这方面需要做更多的工作来真正锁定它，并且，最好不要修改本机库。但这是一个有用的心理练习，有助于展示JavaScript在解决此类问题时提供的灵活性。