HTML DOM addEventListener()Method

元素对象参考手册Element Object

Example

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

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

Try it Yourself »

Definition and Usage

The addEventListener() method is used to attach an event handler to the specified element.

Tip:UseremoveEventListener()the method to remove an event handler added by the addEventListener() method.

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 versions of Opera do not support it either. However, for these browsers that do not support this function, you can useattachEvent()the method to add an event handler (see "More Examples" for a cross-browser solution).

Syntax

element.addEventListener(event, function, useCapture)

Parameter Values

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

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

Tip:For all HTML DOM events, you can view our completeHTML DOM Event Object Reference。
function Required. Specifies the function to run when the event is triggered.

When 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 should be 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
Notes: In Firefox 6 and Opera 11.60, the useCapture parameter is optional. (It has always been optional in Chrome, IE, and Safari).

More Examples

Example

You can reference an external function by its name.

This example demonstrates how to execute a function when the user clicks a <button> element:

document.getElementById("myBtn").addEventListener("click", myFunction);

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

Try it Yourself »

Example

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

This example demonstrates how to add two click events to a <button> element:

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

Try it Yourself »

Example

You can add different types of events to the same element.

This example demonstrates how to add multiple events to the same <button> element:

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

Try it Yourself »

Example

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

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

Try it Yourself »

Example

Change the background of a <button> element:

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

Try it Yourself »

Example

Use the optional parameteruseCaptureto demonstrate the difference between bubbling and capturing phases:

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

Try it Yourself »

Example

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

// Add a <div> event handler
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// Remove the <div> event handler
document.getElementById("myDIV").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:

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

Try it Yourself »

Related Pages

JavaScript Tutorial:HTML DOM EventListener

JavaScript Reference:document.addEventListener()

元素对象参考手册Element Object

Other Extensions