有沒有辦法聽多個事件？

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
     }

}