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:

Shell-ing With TypeScript

June 17, 2018  |  2 minutes to read

My First "Hello, World!"

June 7, 2018  |  5 minutes to read

Live Reloading An Angular 2+ App Behind NGINX

May 14, 2018  |  4 minutes to read

Fantastic Fast Fonts with system-ui

April 27, 2018  |  1 minute to read

Smart Date Searching with Solr

June 26, 2017  |  5 minutes to read