HTML DOM addEventListener () method
Examples
Add a click event in the document. When the user clicks anywhere in the document, the id = "demo" of the <p> element output "Hello World":
. Document.getElementById ( "demo") innerHTML = "Hello World";
});
try it"
Definition and Usage
document.addEventListener () method is used to add an event handler to the document.
Tip: You can use document.removeEventListener () method to remove the addEventListener () method to add event handlers.
Tip: Use element addEventListener (). Method specified element to the event handler.
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, this type of browser version can be used attachEvent () method to add an event handler (cross-browser compatibility issues can view "more examples").
grammar
Parameter Value
parameter | description |
---|---|
event | Required. String name of the event description. 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 | Required. It describes the functions after the event triggered. When the event is triggered, 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 |
Records: | 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 be referred to by the function name external 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 a click event in two documents:
document.addEventListener ( "click", someOtherFunction);
try it"
Examples
You can add different types of events in the document.
This example demonstrates how to add multiple events in a document:
document.addEventListener ( "click", someOtherFunction);
document.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 <body> element of the background:
document.body.style.backgroundColor = "red";
});
try it"
Examples
Using the removeEventListener () method to remove through addEventListener () method to add event handlers:
document.addEventListener ( "mousemove", myFunction);
// Remove the document event handler
document.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:
document.addEventListener ( "click", myFunction);
} Else if (document.attachEvent) {// IE 8 and earlier versions of IE
document.attachEvent ( "onclick", myFunction);
}
try it"
Related Pages
JavaScript tutorial: the HTML the DOM EventListener A
JavaScript Reference Manual: Element .addEventListener ()