How to Create One-Time Events in JavaScript

Sometimes an event need only be called once in your page. For example, clicking a thumbnail which loads and plays a video file or clicking a “more” icon which retrieves and displays extra content via Ajax. However, you’ve probably defined an event handler which is called every time that action occurs. At best, it’s a little inefficient and the browser is retaining unnecessary resources. At worst, your handler could do something unexpected or reload data which is already available.

Fortunately, it’s relatively easy to create one-time event handlers in JavaScript. The process:

1. A handler is assigned to an event, such as clicking an element.
2. When the element is clicked, the handler runs.
3. The handler is removed. Further clicks on that element will no longer call the function.

jQuery

Let’s look at the simplest solution first. If you’re using jQuery, there’s a little-known one() event binding method which implements one-time events.

$("#myelement").one( "click", function() { alert("You'll only see this once!"); } );

It’s used identically to other jQuery event methods. For more information, refer to api.jquery.com/one/.

Self-Removing Handlers

If you’re using raw JavaScript, any handler function can remove itself using a single line of code:

document.getElementById("myelement").addEventListener("click", handler);

// handler function
function handler(e) {
	// remove this handler
	e.target.removeEventListener(e.type, arguments.callee);

	alert("You'll only see this once!");
}

Presuming your handler event argument is named ‘e’, the line:

e.target.removeEventListener(e.type, arguments.callee);

will remove the handler the first time it’s invoked. It doesn’t matter what event type or name you use for your handler — it may even be an in-line anonymous function.

Note I’ve used standard event calls which won’t work in IE8 and below. OldIE’s require a call to detachEvent and the type requires an “on” prefix, e.g. “onclick”. But, if you’re supporting oldIE’s, you’re probably using jQuery or your own custom event handler.

Self-removing handlers may be the best option if you require some flexibility, e.g. you only want to unhook certain event types or remove the handler after different conditions, e.g. two or more clicks.

A One-Time Event Creation Function

Like me, you may be too lazy or forgetful to add an event removal line to every handler function. Let’s create a onetime function which does the hard work for us:

// create a one-time event
function onetime(node, type, callback) {

	// create event
	node.addEventListener(type, function(e) {
		// remove event
		e.target.removeEventListener(e.type, arguments.callee);
		// call handler
		return callback(e);
	});

}

We can now use this function whenever we require a one-time only event:

// one-time event
onetime(document.getElementById("myelement"), "click", handler);

// handler function
function handler(e) {
	alert("You'll only see this once!");
}

While you won’t require one-time events in every page, it’s good to find there are several options available to JavaScript developers.