WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

JavaScript HTML DOM EventListener


The addEventListener() method

Example

Add an occasion audience that fires when a client clicks a button:

document.getElementById("myBtn").addEventListener("click", displayDate);
Try it yourself »

The addEventListener() technique connects an occasion handler to the predetermined element.

The addEventListener() technique connects an occasion handler to a component without overwriting existing occasion handlers.

You can add numerous occasion handlers to one element.

You can include numerous occasion handlers of a similar sort to one component, i.e two "click" events.

You can add occasion audience members to any DOM object not just HTML components. i.e the window object.

The addEventListener() technique makes it simpler to control how the occasion responds to bubbling.

When utilizing the addEventListener() strategy, the JavaScript is isolated from the HTML markup, for better meaningfulness what's more, enables you to include occasion audience members notwithstanding when you don't control the HTML markup.

You can without much of a stretch expel an occasion audience by utilizing the removeEventListener() method.


Syntax

element.addEventListener(event, work, useCapture);

The first parameter is the sort of the occasion (like "click" or "mousedown").

The second parameter is the capacity we need to consider when the occasion happens.

The third parameter is a boolean esteem determining whether to utilize occasion percolating or occasion catching. This parameter is optional.


Add an Event Handler to an Element

Example

Alert "Hello World!" when the client taps on an element:

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

You can likewise allude to an outer "named" function:

Example

Alert "Hello World!" when the client taps on an element:

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}
Try it yourself »

Add Many Event Handlers to the Same Element

The addEventListener() strategy enables you to add numerous occasions to the equivalent component, without overwriting existing events:

Example

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
Try it yourself »

You can add occasions of various sorts to the equivalent element:

Example

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

Add an Event Handler to the Window Object

The addEventListener() strategy enables you to include occasion audience members any HTML DOM item, for example, HTML components, the HTML record, the window object, or other objects that help occasions, similar to the xmlHttpRequest object.

Example

Add an occasion audience that fires when a client resizes the window:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});
Try it yourself »

Passing Parameters

When passing parameter esteems, use a "anonymous function" that calls the predefined work with the parameters:

Example

element.addEventListener("click", function(){ myFunction(p1, p2); });
Try it yourself »

Event Bubbling or Event Capturing?

There are two different ways of occasion spread in the HTML DOM, gurgling and capturing.

Event spread is a method for characterizing the component request when an occasion happens. In the event that you have a <p> component inside a <div> component, and the client taps on the <p> component, which component's "click" occasion ought to be taken care of first?

In bubbling the internal most component's occasion is taken care of first and after that the external: the <p> component's snap occasion is taken care of first, at that point the <div> component's snap event.

In capturing the external most component's occasion is dealt with first and after that the internal: the <div> component's snap occasion will be dealt with first, at that point the <p> component's snap event.

With the addEventListener() strategy you can determine the engendering type by utilizing the "useCapture" parameter:

addEventListener(event, function, useCapture);

The default esteem is false, which will utilize the gurgling engendering, when the esteem is set to genuine, the occasion utilizes the catching propagation.

Example

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, genuine);
Try it yourself »

The removeEventListener() method

The removeEventListener() strategy expels occasion handlers that have been connected with the addEventListener() method:

Example

element.removeEventListener("mousemove", myFunction);
Try it yourself »

Browser Support

The numbers in the table determines the principal program form that completely underpins these methods.

Method
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

Note: The addEventListener() and removeEventListener() strategies are not upheld in IE 8 and prior forms and Opera 6.0 and prior forms. Be that as it may, for these particular program forms, you can utilize the attachEvent() technique to append an occasion handlers to the component, and the detachEvent() technique to expel it:

element.attachEvent(event, function);
element.
detachEvent(event, function);

Example

Cross-program solution:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    /For every single real program, with the exception of IE 8 and earlier
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  /For IE 8 and prior versions
    x.attachEvent("onclick", myFunction);
}
Try it yourself »

HTML DOM Event Object Reference

For a rundown of all HTML DOM occasions, take a gander at our total HTML DOM Event Object Reference.