addEventListener () method for
instance
to add triggered when the user clicks the button event listener:
. document.getElementById ( "myBtn") the addEventListener ( "the Click", displayDate);
addEventListener () method to specify an event handler for a specified element.
addEventListener () method is the additional element of an event handler without overwriting an existing event handler.
You can add multiple event handlers to one element.
You can add more of the same type of event handler to an element, such as two "click" event.
You can add objects to any DOM event handlers rather than just HTML elements, such as window object.
addEventListener () method to make it easier for us to control how to react to an event bubbling.
When using the addEventListener () method, JavaScript and HTML tags are separated, we have reached a better readability; even when not controlled HTML tags also allow you to add event listeners.
You can () method easily remove event listeners by using removeEventListener.
Syntax
element.addEventListener (event, function, useCapture) ;
The first parameter is the type (such as "click" or "mousedown") event.
The second parameter is a function of when the event occurs we need to call.
The third parameter is a Boolean value that specifies the use of event capture or event bubbling. This parameter is optional.
Note: Do not use the "on" prefix to the event; please use the "click" instead of "onclick".
Adding an event handler to the element
instance
when prompted to "Hello World!" When a user clicks on an element:
element.addEventListener ( "the Click", function () {Alert ( "Hello World!");});
You can also refer to external : "name" function
instance
prompt "Hello World!" when the user clicks on an element:
element.addEventListener ( "the click", myFunction);
function myFunction () {
Alert ( "! the Hello World");
}
was added to the same elements multiple event handlers
addEventListener () method allows you to add multiple events to the same elements, but not overwrite existing events:
examples
element.addEventListener ( "the Click", myFunction);
element.addEventListener ( "the Click", mySecondFunction);
element.addEventListener ( "the Click", mySecondFunction);
element.addEventListener ( "mouseout", myThirdFunction);
add an event handler to the Window object
addEventListener () allows you to add event listeners to any HTML DOM objects, such as HTML elements, HTML objects, window objects or other support events, such as xmlHttpRequest object.
Examples of
add trigger when the user resizes the window when the event listener:
window.addEventListener ( "a resize", function () {
document.getElementById ( "Demo") = the innerHTML sometext;.
});
Transfer parameters
when the transfer parameters values, Please call the specified function using "anonymous function" as a parameter:
examples
element.addEventListener ( "click", function ( ) {myFunction (p1, p2);});
event bubble or event capture?
There are two events spread in the HTML DOM methods: bubbling and capture.
Event propagation is a method defined as an element of order when an event occurs. If there is a <p> within the <div> element, then the user clicks the <p> element, which element "click" event should be processed first?
In the bubble, the innermost element of the event will be processed first, then the outside is more: the click event is processed first <p> element, then the click event <div> element.
In the capture, the outermost element of the event will be processed first, then the inside is more: First click event processing <div> element, and then clicking on the event <p> element.
In the addEventListener () method, you are able to specify the type of spread through the use of "useCapture" parameter:
the addEventListener (Event, function, useCapture);
the default value is false, will use bubble propagation, if the value is set to true, the event uses capture spread.
Example
document.getElementById ( "the myP") the addEventListener ( "the Click", myFunction, to true);.
Document.getElementById ( "myDiv") the addEventListener ( "the Click", myFunction, to true);.
RemoveEventListener () method
removeEventListener () method will delete via addEventListener () method additional event handler:
examples
element.removeEventListener ( "mousemove", myFunction) ;
Browser support
digital table provides full support for these methods first browser version.
method
addEventListener () 1.0 9.0 1.0 1.0 7.0
removeEventListener () 1.0 9.0 1.0 1.0 7.0
Notes: IE 8, Opera 6.0 and earlier versions do not support addEventListener () and removeEventListener () method. However, for these special versions of the browser, you can use attachEvent () method to add an event handler to the element by detachEvent () method to delete:
element.attachEvent (Event, function);
element.detachEvent (Event, function);
examples of
cross-browser solution:
var X = document.getElementById ( "myBtn");
IF (x.addEventListener) {// for mainstream browsers, in addition to IE 8 and corrected version
x.addEventListener ( "click", myFunction) ;
} else if (x.attachEvent) {// for IE 8 and earlier
x.attachEvent ( "the onclick", myFunction);
}
