Latest web development tutorials

JavaScript Tutorial

JavaScript Tutorial JavaScript Introduction JavaScript usage JavaScript Output JavaScript grammar JavaScript Statement JavaScript Notes JavaScript variable JavaScript type of data JavaScript Object JavaScript function JavaScript Scope JavaScript event JavaScript The string JavaScript Operator JavaScript Comparison JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript Type conversion JavaScript Regular Expressions JavaScript error JavaScript debugging JavaScript Variable promotion JavaScript Strict mode JavaScript Use errors JavaScript Form validation JavaScript Keep the keyword JavaScript JSON JavaScript void JavaScript Code specification

JS function

JavaScript Function definition JavaScript Function parameter JavaScript Function call JavaScript Closure


DOM Introduction DOM HTML DOM CSS DOM event DOM EventListener DOM element

JS Advanced Tutorial

JavaScript Object JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp Object

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript Pop-ups JavaScript Timing events JavaScript Cookies

JS Library

JavaScript Library JavaScript test jQuery JavaScript test Prototype

JS Examples

JavaScript Examples JavaScript Object instance JavaScript Browser object instance JavaScript HTML DOM Examples JavaScript to sum up

JS Reference Manual

JavaScript Object HTML DOM Object

JavaScript HTML DOM EventListener

addEventListener () method


Listening to events triggered when the user clicks the button:

. Document.getElementById ( "myBtn") addEventListener ( "click", displayDate);

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.


element .addEventListener (event, function, useCapture );

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 Note: Do not use the "on" prefix. For example, use "click", instead of "onclick".

Original elements add an event handler


When the user clicks on the pop-up element when the "Hello World!":

element .addEventListener ( "click", function () {alert ( "Hello World!");});

try it"

You can use the function name to reference an external function:


When the user clicks on the pop-up element when the "Hello World!":

element .addEventListener ( "click", myFunction );

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:


element .addEventListener ( "click", myFunction );
element .addEventListener ( "click", mySecondFunction );

try it"

You can add to the same elements in different types of events:


element .addEventListener ( "mouseover", myFunction );
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.


When the user resets the window size to add event listeners:

window.addEventListener ( "resize", function () {
. document.getElementById ( "demo") innerHTML = sometext;

try it"

Passing parameters

When passing a parameter value, use the function call with parameters "anonymous function":


element .addEventListener ( "click", function () {myFunction (p1, p2);});

try it"

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:

addEventListener (event, function, useCapture) ;

The default value is false, that is bubbling to pass, when the value is true, use the event to capture transfer.


. Document.getElementById ( "myDiv") addEventListener ( "click", myFunction, true);

try it"

removeEventListener () method

removeEventListener () method to remove the addEventListener () method to add event handlers:


element .removeEventListener ( "mousemove", myFunction );

try it"

Browser Support

Figures in the table represent the first browser to support the method version number.

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.attachEvent (event, function);
element.detachEvent (event, function);


Cross-browser solution:

var x = document.getElementById ( "myBtn");
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 .