Remove all events

by Chris

HTML

<div id="foo">Add the event handlers</div>
<button id="add">Add event handlers</button>
<button id="remove">Remove handlers</button>
<div id="msg"></div>

JavaScript

var _eventHandlers = {}; // somewhere global

function addEvent(node, event, handler, capture) {
    if (!(node in _eventHandlers)) {
        // _eventHandlers stores references to nodes
        _eventHandlers[node] = {};
    }
    if (!(event in _eventHandlers[node])) {
        // each entry contains another entry for each event type
        _eventHandlers[node][event] = [];
    }
    // capture reference
    _eventHandlers[node][event].push([handler, capture]);
    node.addEventListener(event, handler, capture);
}


function removeAllEvents(node, event) {
    if (node in _eventHandlers) {
        var handlers = _eventHandlers[node];
        if (event in handlers) {
            var eventHandlers = handlers[event];
            for (var i = eventHandlers.length; i--;) {
                var handler = eventHandlers[i];
                node.removeEventListener(event, handler[0], handler[1]);
            }
        }
    }
}


var div = $('#foo');

$('#add').click(function() {
    $.each([0, 1, 2, 3], function(i) {
        addEvent(div.get(0), 'mouseover', function() {
            $('#msg').append('<div>I from handler #' + i + '</div>');
        }, false);
    });
    div.text('Hover over me and then remove the handlers');
});

$('#remove').click(function() {
    removeAllEvents(div.get(0), 'mouseover');
    div.text('Hover over me again');
    $('#msg').empty();
});