A Platform To Learn To Code

Javascript DOM Events



Event is an action or a state of any action performed either by the user or by the browser. Example : click event, load event, mouseover event etc.

Using Javascript you can attach and can react to certain actions. Events are generally wrapped up with some function, which executes after the event occurs.

Using these events we can build many things because we now have control of the user's action. We can do something when the user does some action like clicking a button.

Event Terminology

There are two terminology when we come across events in web development :

  1. Event Listener - Event listener is an object that listens to certain event
  2. Event Handler - Event handlers are generally a function that is invoked when a certain event occurs.

We can either directly attach an event to the HTML element as an attribute or we can use javascript to do this. Lets see in detail.

Listening to Event Using HTML Attribute

As we have seen in the previous section we can directly mention an event as an attribute to the HTML element and can trigger an event on that action. Example <body onload="doSomething()">

Example

Run the code

You can also attach multiple events to the HTML element by the same method. Example <p onevent1="doSomething()" onevent2="doSomethingElse()">

Example

Run the code

There is another way by which we can attach an event listener to an HTML element, using javascript method.

The addEventListener Method

The addEventListener() method attaches an event listener to an HTML element.

The new event attached doesn't affect previous events. You can add multiple events to the element the same way as we did using the HTML attribute.

Using addEventListener() method you can add events to any DOM element not necessarily only HTML elements.

Syntax

element.addEventListener(event, callback function, useCapture);
  • element - It is HTML element we are attaching event to
  • event - It is the name of event which you are interested in
  • callback function - It is the function that run after event is triggered
  • useCapture - This is a boolean value that specify weather to use event bubbling or event capturing. (This is an optional parameter and default value is false)
While using addEventListener() method do not use 'on' prefix in event name. like, instead of using 'onclick' just use 'click'.

Let's see a few examples.

Example

Run the code

You can also internal function as well in addEventListener() method.

Example

Run the code

Add Multiple Event Listener

The addEventListener() method can add multiple same or different methods to the same element. Means we can add 2 or more that 2 event listeners for the same event.

Example

Run the code

Multiple different types of event can also be attached to the same HTML element using addEventListener() method.

Example

Run the code

Event Capturing And Event Bubbling

In Event bubbling when an event is fired for the element then its first run for the element then same event is fired for its parent element, then all the way up on other ancestor.

For example we have three nested elements MAIN > DIV > P, and a click event is fired on 'P' then it will fire for its parent 'DIV' and then for 'MAIN'.

Example: Event Bubbling

Run the code

Output:

MAIN
DIV

P


Remove Event Listener

Event listening can also be removed from any HTML element or object.

To remove the event listener use removeEventListner() method.

Example: Remove Event Listener

Run the code
DOM Navigation

BOX