Event.js

This Javascript package unifies event handling across browsers.
Allows registering and unregistering of event handlers.
Injects event object and involved DOM element to listener.

Registering an event

Events can be registered using attach method:

var evt     = new Event(),
    click   = document.getElementById('click'),
    message = function (e, src) {
        window.alert(e.type + ' event on "' + src.id + '"');
    };

evt.attach('click', click, message, false);

The first parameter is event name, one of the "mousedown", "click", "mouseover" etc.

The second is DOM element attached to event.

The third is listener which will be executed when event will occur.
Listener receives two parameters: e (event object) and src (DOM element).

The last parameter is boolean telling to use event capturing (true - default) or bubbling (false)

attach method returns listener, which can be used to unregister previously registered event

Multiple events:

var evt                 = new Event(),
    multipleEvents      = document.getElementById('multiple-events'),
    messageHTML         = function (e, src) {
        var infoElement = document.getElementById(src.id + '-info');

        infoElement.innerHTML += e.type + ' event on "' + src.id + '"\r\n';
        infoElement.scrollTop = infoElement.scrollHeight;
    };

evt.attach('mouseover', multipleEvents, messageHTML);
evt.attach('mouseout', multipleEvents, messageHTML);
evt.attach('mousedown', multipleEvents, messageHTML);
evt.attach('mouseup', multipleEvents, messageHTML);

Multiple listeners:

var evt                 = new Event(),
    multipleListeners   = document.getElementById('multiple-listeners'),
    messageMulti        = function (e, src, lName) {
        var infoElement = document.getElementById(src.id + '-info');
        infoElement.innerHTML += '<div>' + e.type + ' event on "'
                                + src.id + ' with "' + lName + '"</div>';
        infoElement.scrollTop = infoElement.scrollHeight;
    };

evt.attach('click', multipleListeners, function (e, src) {
    messageMulti(e, src, 'listener 1');
});

evt.attach('click', multipleListeners, function (e, src) {
    messageMulti(e, src, 'listener 2');
});

evt.attach('click', multipleListeners, function (e, src) {
    messageMulti(e, src, 'listener 3');
});

Unregistering an event

Events can be unregistered using detach method:

var evt     = new Event(),
    noevent = document.getElementById('no-event'),
    message = function (e, src) {
        window.alert(e.type + ' event on "' + src.id + '"');
    };

var noeventHandler = evt.attach('mousedown', noevent, message);
evt.detach('mousedown', noevent, noeventHandler);

detach method accepts four parameters, first and second are event name and DOM element respectively, the third is listener returned by attach method, and the last one is capturing/bubbling boolean (which should be the same as the used in attach method)

Fire an event once:

var evt         = new Event(),
    once        = document.getElementById('once'),
    messageHTML = function (e, src) {
        var infoElement = document.getElementById(src.id + '-info');

        infoElement.innerHTML += e.type + ' event on "' + src.id + '"\r\n';
        infoElement.scrollTop = infoElement.scrollHeight;
    };

var onceHandler = evt.attach('mousedown', once, function (e, src) {
    messageHTML(e, src);
    evt.detach('mousedown', once, onceHandler);
});

Preventing an event

Default events can be prevented using prevent method:

var evt     = new Event(),
    input   = document.getElementById('prevent-click');

evt.attach('keypress', input, function (e) {
    evt.prevent(e);
});

Turning off event capturing and bubbling

Event capturing and bubbling can be turned off using stop method:

var evt     = new Event(),
    upper   = document.getElementById('upper'),
    lower   = document.getElementById('lower');

evt.attach('mousedown', upper, function (e, src) {
    evt.stop(e);
    alert(src.id);
});
Upper
Lower

Tested in IE 6.0, FF 17, Chrome 22, Safari 5.1.1