YouTip

[ Document Object](#) ## Example Add a click event to the document. When the user clicks anywhere in the document, output "Hello World" on the

element with id="demo": document.addEventListener("click", function(){document.getElementById("demo").innerHTML = "Hello World"; }); [Try it »](#) * * * ## Definition and Usage The document.addEventListener() method is used to add an event handler to the document. **Tip:** Use the [document.removeEventListener()](#) method to remove event handlers added with the addEventListener() method. **Tip:** Use the [_element._ addEventListener()](#) method to add event handlers to a 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 these browser versions, you can use the **attachEvent()** 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 complete (#). | | _function_ | Required. A function that describes the action to be performed when the event occurs. When the event occurs, the event object is passed to 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 in the bubbling phase. Possible values: * true - The event handler is executed in the capturing phase * false- Default. The event handler is executed in the bubbling phase | ## Technical Details | DOM Version: | DOM Level 2 Events | | --- | | Return Value: | No return value | | Change History: | 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 »](#) ## Example You can add many events to the document. The added events do 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 »](#) ## 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 »](#) ## Example When passing parameter values, use an "anonymous function" to call a function with parameters: document.addEventListener("click", function() { myFunction(p1, p2); }); [Try it »](#) ## Example Change the background of the element: document.addEventListener("click", function(){ document.body.style.backgroundColor = "red"; }); [Try it »](#) ## Example Use the removeEventListener() method to remove event handlers added with the addEventListener() method: // Add an event handler to the document document.addEventListener("mousemove", myFunction); // Remove the event handler from the document document.removeEventListener("mousemove", myFunction); [Try it »](#) ## Example If the browser does not support the addEventListener() method, you can use the attachEvent() method as an alternative. The following example demonstrates a cross-browser solution: if (document.addEventListener) {//All modern 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 »](#) * * * ## Related Pages JavaScript Tutorial: (#) JavaScript Reference: [_element_.addEventListener()](#) [ Document Object](#)