Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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.

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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;
  });
over 4 years ago · Santiago Trujillo Report

0

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.

over 4 years ago · Santiago Trujillo Report

0

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.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!