HTML DOM addEventListener () method
Examples
To <button> element to add a click event. When the user clicks the button on the id = "demo" of the <p> element output "Hello World":
. Document.getElementById ( "demo") innerHTML = "Hello World";
});
try it"
Definition and Usage
addEventListener () method is used to add an event handler to a specified element.
Tip: Use the removeEventListener () method to remove the addEventListener () method to add event handlers.
Browser Support
Figures in the table represent the first browser to support the method version number.
| method | |||||
|---|---|---|---|---|---|
| addEventListener () | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Note: Internet Explorer 8 and earlier versions of IE do not support addEventListener () method ,, Opera 7.0 and earlier versions do not support Opera. However, they do not support the function of the browser, you can use attachEvent () method to add an event handler (see "More examples" for cross-browser solution).
grammar
Parameter Value
| parameter | description |
|---|---|
| event | have to. A string specifying the name of the event. Note: Do not use the "on" prefix. For example, use "click", instead of "onclick". Tip: All HTML DOM events, you can see our complete HTML DOM Event Object Reference . |
| function | have to. Function to be performed when the specified event triggers. When the event object as the first argument passed to the function. Type event object depends on the particular event. For example, "click" event belongs MouseEvent (mouse event) object. |
| useCapture | Optional. A Boolean value that specifies whether the event execution in the capture or bubbling phase. Possible values:
|
technical details
| DOM version: | DOM Level 2 Events |
|---|---|
| return value: | No return value |
| recording: | In Firefox 6 and Opera 11.60 in useCapture parameter is optional. (In Chrome, IE, and Safari has always been optional). |
More examples
Examples
You can reference external function by function name.
This example demonstrates how to perform a user clicks <button> element Function:
function myFunction () {
. Document.getElementById ( "demo") innerHTML = "Hello World";
}
try it"
Examples
You can add as many events in the document, adding the event will not overwrite the existing event.
This example demonstrates how to add two click event in <button> element:
. Document.getElementById ( "myBtn") addEventListener ( "click", someOtherFunction);
try it"
Examples
You can add different types of events in the same element.
This example demonstrates how to add multiple events with a <button> element:
. Document.getElementById ( "myBtn") addEventListener ( "click", someOtherFunction);
. Document.getElementById ( "myBtn") addEventListener ( "mouseout", someOtherFunction);
try it"
Examples
When passing a parameter value, use the function call with parameters "anonymous function":
myFunction (p1, p2);
});
try it"
Examples
Modify <button> elements Background:
this.style.backgroundColor = "red";
});
try it"
Examples
Use the optional parameters to demonstrate different useCapture bubbling and capture phases:
try it"
Examples
Using the removeEventListener () method to remove the addEventListener () method to add event handlers:
. Document.getElementById ( "myDIV") addEventListener ( "mousemove", myFunction);
// Remove <div> event handler
. Document.getElementById ( "myDIV") removeEventListener ( "mousemove", myFunction);
try it"
Examples
If your browser does not support addEventListener () method, you can use attachEvent () method instead.
The following example demonstrates the cross-browser solution:
if (x.addEventListener) {// all major browsers, except IE 8 and earlier versions of IE
x.addEventListener ( "click", myFunction);
} Else if (x.attachEvent) {// IE 8 and earlier versions of IE
x.attachEvent ( "onclick", myFunction);
}
try it"
Related Pages
JavaScript tutorial: the HTML the DOM EventListener A
JavaScript Reference Manual: document.addEventListener ()