Auto-Ejecting Event Handlers

March 6, 2013  |  1 minute to read


Heads up! This is an old post - it may contain out-of-date information!

It’s often necessary to remove an event handler once the target event has fired and the handler code has been executed. Most JavaScript libraries provide this functionality stock - for example, jQuery users can make use of the .off() function, which takes a string event name (e.g. "click" or "hover") and a reference to the victim handler function.

A test of a cockpit ejection seat
Self-ejecting event handlers are approximately as exciting as self-ejecting cockpit seats.

Unfortunately, obtaining a reference to the original handler function can be tricky. For example, many JavaScript developers choose to code simple event handlers inline, using anonymous functions:

$("#my-target-element").on("click", function() { alert("This element was clicked"); });

How will a developer be able to obtain a reference to this anonymous handler if it needs to be removed in the future? It’s actually quite simple. Included in every function execution context is a reference to both the function’s calling function and the function itself, via arguments.caller and arguments.callee, respectively. Using these references, it’s easy to have the handler remove itself once it has finished executing:

$("#my-target-element").on("click", function() {
    alert("This element was clicked");
    // remove itself
    $("#my-target-element").off("click", this.callee);
});

Note: It’s recommended that the usage of arguments.callee be avoided by naming all anonymous handlers and referring to them by name (see the MDN discussion and explanation. The 5th edition of ECMAScript disallows its usage when running in strict mode.

A more cinematic demonstration of event handlers ejecting themselves.

Other posts you may enjoy:

I built a weird keyboard

June 26, 2023  |  14 minutes to read

Wordle Bot

January 25, 2022  |  6 minutes to read

Herding Gits

August 26, 2021  |  2 minutes to read

It's finally here! 🎉

May 7, 2021  |  1 minute to read

Capturing Alexa Errors with Sentry and GitLab

November 18, 2020  |  4 minutes to read