The Common targets are Note: The
Common targets are
Note: If a particular anonymous function is in the list of event listeners registered for a certain target, and then later in the code, an identical anonymous function is given in an
Indeed, anonymous functions are not identical even if defined using the same unchanging source-code called repeatedly, even if in a loop.
Repeatedly defining the same unnamed function in such cases can be problematic. (See Memory issues, below.)
If an event listener is added to an
A case-sensitive string representing the event type to listen for.
The object that receives a notification (an object that implements the
An object that specifies characteristics about the event listener. The available options are:
A boolean value indicating that events of this type will be dispatched to the registered
A boolean value indicating that the
A boolean value that, if
A boolean value indicating whether events of this
type will be dispatched to the registered
Note: For event listeners attached to the event target, the event is in the target phase, rather than the capturing and bubbling phases. Event listeners in the capturing phase are called before event listeners in any non-capturing phases.
A Firefox (Gecko)-specific parameter. If
The event listener callback
The event listener can be specified as either a callback function or an object whose
The callback function itself has the same parameters and return value as the
For example, an event handler callback that can be used to handle both
Safely detecting option support
In older versions of the DOM specification, the third parameter of
Because older browsers (as well as some not-too-old browsers) still assume the third parameter is a Boolean, you need to build your code to handle this scenario intelligently. You can do this by using feature detection for each of the options you're interested in.
For example, if you want to check for the
This creates an
You can check whether any option is supported this way. Just add a getter for that option using code similar to what is shown above.
Then, when you want to create an actual event listener that uses the options in question, you can do something like this:
Here we're adding a listener for the
If you'd prefer, you can use a third-party library like Modernizr or Detect It to do this test for you.
You can learn more from the article about
Add a simple listener
This example demonstrates how to use
In this code,
Add an abortable listener
This example demonstrates how to add an
In the example above, we modify the code in the previous example such that after the second row's content changes to "three", we call
Event listener with anonymous function
Here, we'll take a look at how to use an anonymous function to pass parameters into the event listener.
Notice that the listener is an anonymous function that encapsulates code that is then, in turn, able to send parameters to the
Event listener with an arrow function
This example demonstrates a simple event listener implemented using arrow function notation.
Please note that while anonymous and arrow functions are similar, they have different
That means that the variables and constants available to the containing function are also available to the event handler when using an arrow function.
Example of options usage
Click the outer, middle, inner containers respectively to see how the options work.
Before using a particular value in the
Event listener with multiple options
You can set more than one of the options in the
The value of "this" within the handler
It is often desirable to reference the element on which the event handler was fired, such as when using a generic handler for a set of similar elements.
When attaching a handler function to an element using
As a reminder, arrow functions do not have their own
If an event handler (for example,
Note that the value of
The value of
Specifying "this" using bind()
This is an example with and without
Another solution is using a special function called
Another way of handling the reference to this is to pass to the
Getting data into and out of an event listener
It may seem that event listeners are like islands, and that it is extremely difficult to pass them any data, much less to get any data back from them after they execute. Event listeners only take one argument, the Event Object, which is automatically passed to the listener, and the return value is ignored. So how can we get data in and back out of them? There are a number of good methods for doing this.
Getting data into an event listener using "this"
As mentioned above, you can use
This method is suitable when you don't need to know which HTML element the event listener fired on programmatically from within the event listener. The primary benefit to doing this is that the event listener receives the data in much the same way that it would if you were to actually pass it through its argument list.
Getting data into an event listener using the outer scope property
When an outer scope contains a variable declaration (with
Note: Although inner scopes have access to
Getting data into and out of an event listener using objects
Because object properties can be used to store data in memory as long as a variable referencing the object exists in memory, you can actually use them to get data into an event listener, and any changes to the data back out after an event handler executes. Consider this example.
In this example, even though the scope in which both the event listener and the
interval function are defined would have finished executing before the original value of
Note: Objects are stored in variables by reference, meaning only the memory location of the actual data is stored in the variable. Among other
things, this means variables that "store" objects can actually affect other variables that get assigned ("store") the same object reference. When two variables reference the same object (e.g.,
Note: Because objects are stored in variables by reference, you can return an object from a function to keep it alive (preserve it in memory so you don't lose the data) after that function stops executing.
In the first case above, a new (anonymous) handler function is created with each iteration of the loop. In the second case, the same previously declared function is used as an event handler, which results in smaller
memory consumption because there is only one handler function created. Moreover, in the first case, it is not possible to call
Actually, regarding memory consumption, the lack of keeping a function reference is not the real issue; rather it is the lack of keeping a static function reference.
Improving scrolling performance with passive listeners
The specification for
To prevent that problem, browsers other than Safari and Internet Explorer have changed the default value of
Note: See the compatibility table below if you need to know which browsers (and/or which versions of those browsers) implement this altered behavior.
Because of that, when you want to override that behavior and ensure the
You don't need to worry about the value of
In older browsers that don't support the
BCD tables only load in the browser