addEventListener
addEventListener allows the registration of event listeners on the event target.
Syntax
element.addEventListener( type, listener, useCapture )
Parameters
The addEventListener() method takes the following parameters:
type
|
A string representing the event type being registered. |
|
|
The listener parameter takes an interface implemented by the user which contains the methods to be called when the event occurs. |
|
|
If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered EventListener before being dispatched to any EventTargets beneath them in the tree. Events which are bubbling upward through the tree will not trigger an EventListener designated to use capture. |
Example
<html>
<head>
<title>DOM Event Examples</title>
<style>
#t { border: 1px solid red }
#t1 { background-color: pink; }
</style>
<script>
// Event Registration Example
function l_func() {
t2 = document.getElementById("t2");
t2.innerHTML = "three";
}
function load() {
el = document.getElementById("t");
el.addEventListener("click", l_func, false);
}
</script>
</head>
<body onload="load();">
<table id="t">
<tr><td id="t1">one</td></tr>
<tr><td id="t2">two</td></tr>
</table>
</body>
</html>
|
Notes
If an EventListener is added to an EventTarget while it is processing an event, it will not be triggered by the current actions but may be triggered during a later stage of event flow, such as the bubbling phase.
If multiple identical EventListeners are registered on the same EventTarget with the same parameters the duplicate instances are discarded. They do not cause the EventListener to be called twice and since they are discarded they do not need to be removed with the removeEventListener method.
Specification
addEventListener
