有没有办法听多个事件？

Question

例如，当所有事件发生时，我想触发一个回调：

on(['aEvent', 'bEvent', 'cEvent'], callback)

其中回调函数获得的阵列（或者对象）的从两个参数aEvent ， bEvent和cEvent 。

更新：关于我要实现的内容。

我正在构建一个向用户公开API的警报系统，因此，当发生某些事件时，用户可以对其做出响应。 有时候，用户想只有在回应aEvent和bEvent都发生。 而这个要求成为问题。

Answer 1

使用ES2015和RxJs.zip ：

function multiSubscribe(elem, events) {
    return Rx.Observable.zip(...events.map(
        event => Rx.Observable.fromEvent(elem, event)
    )).subscribe(arrayOfEvents => {
        // do whatever
    });
}

Answer 2

我很难理解何时将其实际用于实际环境，这使我不确定自己真正想做什么，但是您可以编写自己的函数来跟踪一系列事件中的每一个何时发生发生了：

function listenMultiple(elem, events, callback) {
    var eventList = events.split(" ");
    var cnt = 0;
    var results = {};

    eventList.forEach(function(event) {
        function localHandler(e) {
            this.removeEventListener(event, localHandler);
            results[event] = e;
            ++cnt;
            if (cnt === eventList.length) {
                callback(results);
            }
        }
        elem.addEventListener(event, localHandler);
    });
}

用法：

listenMultiple(elem, "aEvent bEvent cEvent", function(results) {
    // all three events have happened
});

注意：为了避免多次计数给定事件，当事件发生时，这将删除侦听器。

---

多次对这种情况做出响应很复杂，因为它完全取决于您希望它如何工作，因为可以配置多种方式，而您并没有解释您希望它如何工作。 我能想到的最简单的方法是，让它在触发时再次重新初始化自身。 这将等待所有事件发生，然后在发生所有事件时，调用相同的函数来再次进行设置。 当最后一个事件发生时，这实际上将重新启动所有计数器，因此它将忽略该系列的最后一个发生之前发生的任何其他事件的任何剩余。

function listenMultiple(elem, events, callback) {
    var eventList = events.split(" ");
    var cnt = 0;
    var results = {};

    eventList.forEach(function(event) {
        function localHandler(e) {
            this.removeEventListener(event, localHandler);
            results[event] = e;
            ++cnt;
            if (cnt === eventList.length) {
                callback(results);
                // configure for next sequence
                listenMultiple(elem, events, callback);
            }
        }
        elem.addEventListener(event, localHandler);
    });
}

---

编辑

既然您已经弄清了其中各种事件交错发生的次数，那么您想要的内容就变得更加复杂了，因为您必须为每个事件保持N个状态。 这是一个适用于DOM事件的方案（因为这是我测试它的最简单方法），但是可以肯定地适用于任何类型的事件：

 // pass a list of ids and a list of events and a callback function listenMultiple(ids, events, callback) { var eventList = events.split(" "); var idList = ids.split(" "); if (idList.length !== eventList.length) { throw new Error("Number of ids and events must be the same"); } var eventCntrs = {}; var results = []; eventList.forEach(function(event, index) { var key = event + idList[index]; eventCntrs[key] = 0; function localHandler(e) { // get our current cnt for this event var cnt = eventCntrs[key]; log("click on: ", this.id, ", cnt = ", cnt); // if we don't yet have any results for this cnt, // then initialize the results object for this cnt if (!results[cnt]) { results[cnt] = {_cntr: 0}; } // save this event object // and count it results[cnt][key] = {time: Date.now()}; ++results[cnt]._cntr; // count this event ++eventCntrs[key]; // if this fills out a result set, then fire the callback if (results[cnt]._cntr === eventList.length) { callback(results[cnt]); // clear item saved in results array so it can be garbage collected delete results[cnt]; } } document.getElementById(idList[index]).addEventListener(event, localHandler); }); } listenMultiple("test1 test2 test3", "click click click", function(result) { log("callback: ", result); }) // diagnostic function for showing results function log(args) { var str = ""; for (var i = 0; i < arguments.length; i++) { if (typeof arguments[i] === "object") { str += JSON.stringify(arguments[i]); } else { str += arguments[i]; } } var div = document.createElement("div"); div.innerHTML = str; var target = log.id ? document.getElementById(log.id) : document.body; target.appendChild(div); } log.id = "output"; 

 #output { margin-top: 30px; } 

 Click any sequence of the three buttons.<br><br>Each time a combination of each one of the three is completed, a result will be output via the callback.<br><br> <button id="test1">1</button><button id="test2">2</button><button id="test3">3</button> <div id="output"> 

Answer 3

您可以尝试这样

document.getElementById('mouseenter',master_handler,false)
document.getElementById('mouseout',master_handler,false)
document.getElementById('mouseclick',master_handler,false)

所有事件都绑定到一个处理程序。 这就是处理程序的方式

function master_handler(event){
    if(event.type=="mouseenter"){
       Some something special
     }
     if(event.type=="mouseout"){
       Some something special
     }
     if(event.type=="click"){
       Some something special
     }

}