我创建了一个多用途工厂事件发射器工厂函数。有了它，我可以将对象变成事件发射器。事件发射器工厂的代码如下，如果有人想看或使用的话。

我的问题是如何从 DOM 中获取事件列表。 请注意，我并不是要获取绑定(bind)事件的列表。我想要所有可能事件的列表。 我想向发射器添加“管道”方法。此方法将获取一个 DOM 对象并绑定(bind)到所有可能的事件，然后当这些事件中的任何一个触发时，每个事件都会在发射器中触发同名事件。

我认为没有办法做到这一点。我准备制作一个硬编码的事件名称数组，但如果我可以为 DOM 获取数组，那会好得多，并且在 W3C 标准化更多事件类型时仍然有效。

附言如果你为 W3C 工作，这就是那种让每个人都讨厌 DOM 的废话。请停止将 JavaScript 视为一种玩具语言。它不是玩具语言，需要的不仅仅是玩具 DOM。

/**
 * Creates a event emitter
 */
function EventEmitter() {
    var api, callbacks;

    //vars
    api = {
        "on": on,
        "trigger": trigger
    };
    callbacks = {};

    //return the api
    return api;

    /**
     * Binds functions to events
     * @param event
     * @param callback
     */
    function on(event, callback) {
        var api;

        if(typeof event !== 'string') { throw new Error('Cannot bind to event emitter. The passed event is not a string.'); }
        if(typeof callback !== 'function') { throw new Error('Cannot bind to event emitter. The passed callback is not a function.'); }

        //return the api
        api = {
            "clear": clear
        };

        //create the event namespace if it doesn't exist
        if(!callbacks[event]) { callbacks[event] = []; }

        //save the callback
        callbacks[event].push(callback);

        //return the api
        return api;

        function clear() {
            var i;
            if(callbacks[event]) {
                i = callbacks[event].indexOf(callback);
                callbacks[event].splice(i, 1);

                if(callbacks[event].length < 1) {
                    delete callbacks[event];
                }

                return true;
            }
            return false;
        }
    }

    /**
     * Triggers a given event and optionally passes its handlers all additional parameters
     * @param event
     */
    function trigger(event    ) {
        var args;

        if(typeof event !== 'string' && !Array.isArray(event)) { throw new Error('Cannot bind to event emitter. The passed event is not a string or an array.'); }

        //get the arguments
        args = Array.prototype.slice.apply(arguments).splice(1);

        //handle event arrays
        if(Array.isArray(event)) {

            //for each event in the event array self invoke passing the arguments array
            event.forEach(function(event) {

                //add the event name to the begining of the arguments array
                args.unshift(event);

                //trigger the event
                trigger.apply(this, args);

                //shift off the event name
                args.shift();

            });

            return;
        }

        //if the event has callbacks then execute them
        if(callbacks[event]) {

            //fire the callbacks
            callbacks[event].forEach(function(callback) { callback.apply(this, args); });
        }
    }
}

最佳答案

这是一个适用于 Chrome、Safari 和 FF 的版本。

Object.getOwnPropertyNames(document).concat(Object.getOwnPropertyNames(Object.getPrototypeOf(Object.getPrototypeOf(document)))).filter(function(i){return !i.indexOf('on')&&(document[i]==null||typeof document[i]=='function');})

UPD 1:

这是适用于 IE9+、Chrome、Safari 和 FF 的版本。

Object.getOwnPropertyNames(document).concat(Object.getOwnPropertyNames(Object.getPrototypeOf(Object.getPrototypeOf(document)))).concat(Object.getOwnPropertyNames(Object.getPrototypeOf(window))).filter(function(i){return !i.indexOf('on')&&(document[i]==null||typeof document[i]=='function');}).filter(function(elem, pos, self){return self.indexOf(elem) == pos;})

UPD 2:

这是一个使用较新的 JavaScript 功能的版本([...new Set(...)] 用于过滤掉重复项，替换 filter 方法) .

[...new Set([
 ...Object.getOwnPropertyNames(document),
 ...Object.getOwnPropertyNames(Object.getPrototypeOf(Object.getPrototypeOf(document))),
 ...Object.getOwnPropertyNames(Object.getPrototypeOf(window)),
].filter(k => k.startsWith("on") && (document[k] == null || typeof document[k] == "function")))];

PS:结果是一组事件名称，如 ["onwebkitpointerlockerror", "onwebkitpointerlockchange", "onwebkitfullscreenerror", "onwebkitfullscreenchange", "onselectionchange", "onselectstart", "onsearch", "onreset", “onpaste”、“onbeforepaste”、“oncopy”] ... 等等。

关于javascript - 获取所有 DOM 事件的数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9368538/