Single Event Handler for all events javascript/jQuery

Question

I know I can have one handler handle multiple events using jQuery like:

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

Also, I can register an event from all elements using jQuery like:

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

I have two questions:

How do I register a single listener for multiple events in pure javascript?
Is there any way to have a single handler for all events in a document using JS or jQuery, like a master handler which will delegate the events to my other handlers?

I am looking at something like this:

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

On second question there was similar question on SO http://stackoverflow.com/questions/743876/list-all-javascript-events-wired-up-on-a-page-using-jquery — antyrat, Dec 24 '12 at 10:25
@antyrat That question is about listing the registered handlers, I want to register for events. — ATOzTOA, Dec 24 '12 at 10:29
@Sam First question, I don't want to add multiple event handlers so that I can track multiple events, it becomes cumbersome when you need to handle clicks for 10 different elements. Second question, to take over the whole event mechanism so that I can control the way the events are propagated. — ATOzTOA, Dec 24 '12 at 10:35
@ATOzTOA [http://stackoverflow.com/questions/4643556/is-there-a-generic-window-onevent-in-javascript](http://stackoverflow.com/questions/4643556/is-there-a-generic-window-onevent-in-javascript) hope it answers your query — AshokD, Dec 24 '12 at 10:39
@AshokD That question is similar, but only looks at user interaction. I am looking at a fully generic version for all events in a browser. Like having the browser give you the control over its event manager. — ATOzTOA, Dec 24 '12 at 18:07

Akhil Sekharan · Accepted Answer · 2012-12-24T11:18:20.560

This is the closest i can get by 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);

This kinda works if I only need user events. But I want to get hold of window events also, like window resize and scroll. I was looking at something already available in jquery. — ATOzTOA, Dec 24 '12 at 11:34

Single Event Handler for all events javascript/jQuery

1 Answers1