tutorialstonight logo

Javascript DOM Events


What is an event?

Event is an action or a state of any action performed either by the user or by the browser.

All Nodes of DOM generate such actions but events are not limited to DOM there are other events like mouse event, a keyboard event, document event, etc.

Example of DOM Events are:

  • User click a button
  • Mouse moved
  • Page loaded
  • Key pressed
  • Form submitted

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 you can make so many things because now you have control over the user's action. You 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 a certain event like a click, keypress, mouse move, etc.
  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. Let's see in detail.


Adding Event Listener

Event listeners are something that keeps track of what action to be taken when a specific event occurs.

It listens to the event and fires the function. but you have to specifically mention in what event what action is to be taken.

There are 3 different ways by which you can attach an event listener to a certain element:

  1. Using HTML attribute
  2. Using DOM Property
  3. Using addEventListener Method


1. Using HTML Attribute

You can directly set an event handler to HTML element as an attribute named on<event> and can trigger an event on that action.

For an instance if you want to attack a click event to HTML element then use onclick attribute to it. Example <button onclick="doSomething()">

Output:

Adding multiple event listeners :

You can see above in the code there is one event attached to the <button> element but you can attach as many events as you want.

To attach multiple event just separate the events by a space. Example <p onevent1="doSomething()" onevent2="doSomethingElse()">


2. Using DOM Property

Every element in the DOM has a bunch of DOM properties a list of those properties can help us to add an event listener to the element.

You can assign a event handler using DOM property on<event>. For example, element.onclick

event listener dom property
DOM property to add event listener

If you assign an event handler directly using HTML-attribute then the browser reads the attribute and creates a new function and assigns it to the DOM property.

Here is what it means, given below is 2 piece of code works the same:



Both of the above codes are equivalent to each other.

While assigning function to event handler properties of DOM, just assign function name. The function should be assigned as myFxn not myFxn().


3. addEventListener Method

The fundamental problem with assigning event handlers with the above method is that you can't attach 2 different event handlers for a single event.

There is another way of assigning event handlers which is free from the problem mensioned abouve, 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 use the HTML attribute.

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

addEventListener syntax :

element.addEventListener(event, callback function, useCapture);
  • element - It is an HTML element we are attaching event to
  • event - It is the name of the event which you are interested in
  • callback function - It is the function that runs after event is triggered
  • useCapture - This is a boolean value that specifies whether to use event bubbling or event capturing. (This is an optional parameter and the default value is false)

While using addEventListener() method do not use 'on' prefix in event name. like, instead of using 'onclick' just use 'click'.

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

Multiple event using addEventListener

The addEventListener method can very well add multiple same or different methods to a single element. This means we can add 2 or more than 2 event listeners for the same event.

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


Event Bubbling

In Event bubbling when an event is fired for the element then its first run for the element then the same event is fired for its parent element, then all the way up on another 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'.

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.

DOM Navigation