Latest web development tutorials

HTML DOM addEventListener () method

Document Object Reference Document Object

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.addEventListener ( "click", function () {
. 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

document.addEventListener (event, function, useCapture)

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:
  • true - event handler executed during the capture phase
  • false- default. Event handlers execute in the bubbling phase

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:

document.addEventListener ( "click", myFunction);

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", myFunction);
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 ( "mouseover", myFunction);
document.addEventListener ( "click", someOtherFunction);
document.addEventListener ( "mouseout", someOtherFunction);

try it"

Examples

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

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

try it"

Examples

Modify <body> element of the background:

document.addEventListener ( "click", function () {
document.body.style.backgroundColor = "red";
});

try it"

Examples

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

// Add an event handler to the document
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:

if (document.addEventListener) {// all major browsers, except IE 8 and earlier versions of IE
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 ()

Document Object Reference Document Object