JavaScript/jQuery单一事件处理程序

Question

我知道我可以使用jQuery让一个处理程序处理多个事件，例如：

$('#myID').bind('blur mousedown mouseup focus', function (e) {}

此外，我可以使用jQuery从所有元素注册事件，如下所示：

$(document).on("click", "*", function(event) {
    console.log("Click");
});

我有两个问题：

1. 如何在纯JavaScript中为多个事件注册单个侦听器？

2. 是否有一种使用JS或jQuery在文档中拥有单个处理程序的方法，例如主处理程序，它将委派事件给我的其他处理程序？

我正在研究这样的东西：

$(document).on("*", "*", function(event) {
    console.log("I am the master handler...");
    // call delegates
});

- ATOzTOA

---

在第二个问题上，SO 上有一个类似的问题：https://dev59.com/03RB5IYBdhLWcg3wCjYV - antyrat

@antyrat 那个问题是关于列出已注册的处理程序，而我想要注册事件。 - ATOzTOA

你想这样做有特别的原因吗？ - Undefined

@Sam 第一个问题，我不想添加多个事件处理程序来跟踪多个事件，当您需要处理10个不同元素的点击时，这变得很麻烦。第二个问题，接管整个事件机制，以便我可以控制事件传播的方式。 - ATOzTOA

@ATOzTOA https://dev59.com/mFPTa4cB1Zd3GeqPhkA6 希望它能回答你的问题。 - AshokD

@AshokD 那个问题类似，但只考虑了用户交互。我正在寻找一个适用于浏览器中所有事件的通用版本。就像让浏览器让您控制其事件管理器一样。 - ATOzTOA

Answer 1

这是我用JavaScript所能做到的最接近的效果：JSBIN-Demo。

<input type="text" id="myText" />


var allEvents = ['focus','blur','mouseover','mousedown','mouseup','mousemove', 'click'];

function masterHandler(){
    var event = event || window.event;
    switch(event.type){
        case 'click':
            console.log('cliked');
            break;
        case 'mouseover':
            console.log('mouseover');
            break;
    }
}

function bindAllEvents(selector, handler) {
    var elements = document.querySelectorAll(selector);
    for(var i=0;i<elements.length;i++){
        for (var key in allEvents){
            elements[i].addEventListener(allEvents[key], handler, false);
        }
    }
}

bindAllEvents('*', masterHandler);

- Akhil Sekharan

---

这种方法可以用于获取用户事件，但我还想获取窗口事件，比如窗口大小调整和滚动。我正在查看 jQuery 中已有的一些内容。 - ATOzTOA