Remote Software Engineer at Stripe and cellist based out of Ontario. Previously at GitLab. Fascinated with building usable, delightful software.
March 6, 2013 | 1 minute to read
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.
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.
Other posts you may enjoy:
October 14, 2024 | 3 minutes to read
May 31, 2024 | 6 minutes to read
June 26, 2023 | 14 minutes to read
January 25, 2022 | 6 minutes to read
August 26, 2021 | 2 minutes to read