JavaScript HTML DOM EventListener
addEventListener () method
Examples
Listening to events triggered when the user clicks the button:
try it"
addEventListener () method is used to add an event handler to a specified element.
addEventListener () method to add the event handler does not overwrite the existing event handler.
You can add multiple event handlers to one element.
You can add more than one of the same type of event handler to the same element, such as: two "click" event.
You can add objects to any DOM event listener, not just HTML elements. Such as: window object.
addEventListener () method can more easily control event (bubbling and capture).
When you use the addEventListener () method, JavaScript HTML tags from left to carve, more readable, in the absence of control HTML tags can also add event listeners.
You can use the removeEventListener () method to remove an event listener.
grammar
The first parameter is the type (such as "click" or "mousedown") event.
The second argument is the function call is triggered after the event.
The third parameter is a Boolean value that is used to describe an event bubbling or capture. This parameter is optional.
 | Note: Do not use the "on" prefix. For example, use "click", instead of "onclick". |
|---|
Original elements add an event handler
Examples
When the user clicks on the pop-up element when the "Hello World!":
try it"
You can use the function name to reference an external function:
Examples
When the user clicks on the pop-up element when the "Hello World!":
function myFunction () {
alert ( "Hello World!");
}
try it"
Add multiple event handlers to the same element
addEventListener () method allows you to add multiple events to the same elements, and does not overwrite existing events:
Examples
element .addEventListener ( "click", mySecondFunction );
try it"
You can add to the same elements in different types of events:
Examples
element .addEventListener ( "click", mySecondFunction );
element .addEventListener ( "mouseout", myThirdFunction );
try it"
Add an event handler to the Window object
addEventListener () method allows you to add objects in the HTML DOM event listener, HTML DOM objects such as: HTML elements, HTML documents, window object. Event objects or other expenses such as: xmlHttpRequest object.
Examples
When the user resets the window size to add event listeners:
. document.getElementById ( "demo") innerHTML = sometext;
});
try it"
Passing parameters
When passing a parameter value, use the function call with parameters "anonymous function":
Event capture or event bubbling?
The event delivery in two ways: bubbling and capture.
The event delivery order of the elements defined event trigger. If you <p> element into the <div> element, the user clicks <p> element, which element of the "click" event to be triggered it?
Bubbling, the event will be an internal element is triggered, then trigger the external elements, namely: a click event <p> element is triggered first, then triggers the click event <div> element.
In the capture, the event will be an external element is triggered, then the event is triggered internal elements, namely: <div> element to trigger a click event, and then trigger a click event <p> element.
addEventListener () method to specify "useCapture" parameter to set the delivery type:
The default value is false, that is bubbling to pass, when the value is true, use the event to capture transfer.
Examples
try it"
removeEventListener () method
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 |
| removeEventListener () | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Note: IE 8 and earlier versions of IE, Opera 7.0 and earlier versions do not support addEventListener () and removeEventListener () method. However, this type of browser version can be used detachEvent () method to remove an event handler:
element.detachEvent (event, function);
Examples
Cross-browser solution:
if (x.addEventListener) {// all major browsers, except IE 8 and earlier versions
x.addEventListener ( "click", myFunction);
} Else if (x.attachEvent) {// IE 8 and earlier versions
x.attachEvent ( "onclick", myFunction);
}
try it"
HTML DOM Event Object Reference
All HTML DOM events, you can see our complete HTML DOM Event Object Reference .