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 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
- Adding event listener
- Event Bubbling
- Remove Event Listener
There are two terminology when we come across events in web development :
- Event Listener - Event listener is an object that listens to a certain event like a click, keypress, mouse move, etc.
- Event Handler - Event handlers are generally a function that is invoked when a certain event occurs.
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
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
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,
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
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 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.
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)
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
Multiple event using addEventListener
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
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'.
Remove Event Listener
Event listening can also be removed from any HTML element or object.
To remove the event listener use