Override all JavaScript events bound to an element with a single new event

Question

Assuming that there are a large number of elements throughout the site that have an unknown number and type of events bound to them.

If I need to override all of these events with one single bound event, and only that event will fire, what are some recommendations?

I would be binding the event to a click event handler, and I am using jQuery.

Thanks in advance.

Answer 1

You’re looking for jQuery#unbind.

To remove all event handlers on an element or a set of elements, just do:

$('.some-selector').unbind();

To unbind only click handlers, use unbind('click'):

$('.some-selector').unbind('click');

To unbind all click handlers and immediately bind your own handler after that, you can do something like this:

$('.some-selector').unbind('click').click(function(event) {
  // Your code goes here
});

Note that this will only work for events bound using jQuery (using .bind or any jQuery method that uses .bind internally). If you want to remove all possible onclick events from a given set of elements, you could use:

$('.some-selector')
  .unbind('click') // takes care of jQuery-bound click events
  .attr('onclick', '') // clears `onclick` attributes in the HTML
  .each(function() { // reset `onclick` event handlers
    this.onclick = null;
  });

Answer 2

I would like to provide a thought without removing all events all together (just override them).

If your new one single bound event (we call it "click" here) is specific to the element it binds to, then I believe you can ignore any other events simply by stopPropagation() function. Like this

$("specific-selector").on("click", ".specific-class", function (e) {
  e.stopPropagation()
  // e.stopImmediatePropagation()
  /* your code continues ... */
});

It will stop events bubbles up, so your other events won't fire. use stopImmediatePropagation() to prevent other events attached onto the same elements as "click" does.

For example, if "mouseleave" event is also bind to $("specific-selector .specific-class") element, it won't fire, too.

At last, all other events won't fire on this element but your new "click" element.

The unsolved question is, what if other events also use stopPropagation()? ... Then I think the one with best specification wins, so try to avoid complex, too many events is final suggestion.

You can see "Direct and delegated events" on jQuery site for more information.

Answer 3

Looks like this is pretty simple actually:

$('#foo').unbind('click');
$('#foo').bind('click', myNewFunction);

Thanks for your responses though.

Answer 4

Try to use live instead of bind. Then you can easily remove live binding with die from selector which is fast operation and set another live equally fast.

   $('selection here').live('..', .....);  // multiple invocations
   $('selection here').die();
   $('selection here').live('click',.....);

DOM is not touched at all. Event condition is evaluated on event occurrence.

But generally if you just want to swap handler functions why not to do it this way:

var ahandler = function(evt) { /* first implementation */ }
$('.selector').bind('click', function(evt) { ahandler(evt); });

//and then if you want to change handlers
ahandler = function(evt) { /* new implementation */ };

This gives absolutely no cost of any changes, rebinding etc.