HTML DOM addEventListener()Method

Document 对象参考手册Document Object

Example

Add a click event to the document. When the user clicks anywhere in the document, output "Hello World" on the <p> element with id="demo":

document.addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World"; });

Try it Yourself »

Definition and Usage

The document.addEventListener() method is used to add an event handler to the document.

Tip:You can use the document.removeEventListener()method to remove the event handler added by the addEventListener() method.

Tip:Use the element.addEventListener()method to add an event handler to the specified element.

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
addEventListener() 1.0 9.0 1.0 1.0 7.0

Note:Internet Explorer 8 and earlier IE versions do not support the addEventListener() method, and Opera 7.0 and earlier Opera versions do not support it either. However, for such browser versions, you can use theattachEvent()method to add event handlers (for cross-browser compatibility issues, see "More Examples").

Syntax

document.addEventListener(event, function, useCapture)

Parameter Values

Parameter Description
event Required. A string that specifies the name of the event.

Note:Do not use the "on" prefix. For example, use "click" instead of "onclick".

Tip:For all HTML DOM events, see our completeHTML DOM Event Object Reference Manual。
function Required. Describes the function to execute when the event is triggered.

When the event is triggered, the event object is passed into the function as the first parameter. The type of the event object depends on the specific event. For example, the "click" event belongs to the MouseEvent object.
useCapture Optional. A Boolean value that specifies whether the event is executed in the capturing or bubbling phase.

Possible values:
  • true - The event handler executes in the capturing phase
  • false - Default. The event handler executes in the bubbling phase

Technical Details

DOM Version: DOM Level 2 Events
Return Value: No return value
Change Log: The useCapture parameter is optional in Firefox 6 and Opera 11.60. (It has always been optional in Chrome, IE, and Safari).

More Examples

Example

You can reference an external function by its name:

document.addEventListener("click", myFunction);

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}

Try it Yourself »

Example

You can add many events to the document, and the added events will not overwrite existing events.

This example demonstrates how to add two click events to the document:

document.addEventListener("click", myFunction);
document.addEventListener("click", someOtherFunction);

Try it Yourself »

Example

You can add different types of events to the document.

This example demonstrates how to add multiple events to the document:

document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);

Try it Yourself »

Example

When passing parameter values, use an "anonymous function" to call a function with parameters:

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

Try it Yourself »

Example

Change the background of the <body> element:

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

Try it Yourself »

Example

Use the removeEventListener() method to remove an event handler added by the addEventListener() method:

// Add an event handler to the document
document.addEventListener("mousemove", myFunction);

// Remove the document's event handler
document.removeEventListener("mousemove", myFunction);

Try it Yourself »

Example

If the browser does not support the addEventListener() method, you can use the attachEvent() method instead.

The following example demonstrates a cross-browser solution:

if (document.addEventListener) { // All major browsers, except IE 8 and earlier IE versions
    document.addEventListener("click", myFunction);
} else if (document.attachEvent) { // IE 8 and earlier IE versions
    document.attachEvent("onclick", myFunction);
}

Try it Yourself »

Related Pages

JavaScript Tutorial:HTML DOM EventListener

JavaScript Reference Manual:element.addEventListener()

Document 对象参考手册Document Object

Other Extensions