Since there are many ways to add an event, you must be wondering what happens when we use more than one at the same time?
Let's try and answer that question in this post.
Here are few combinations I could think of for one element.
- Using HTML attributes to register different events.
- Registering the same event with HTML attribute and DOM property but with different handler functions.
- Registering multiple handlers for the same event using DOM property.
- Registering multiple events using DOM property.
- Registering the same event with different handlers using addEventListener.
- Registering the multiple events with different handlers using addEventListener.
- Registering the same event with HTML attribute, DOM Property, and addEventListener
Now I want to mention one thing here that many of these cases are fabricated purely for illustration purposes. It is very less likely that you will encounter these in your day-to-day life.
I know it's a lot to grasp at once. Let's look at them case by case. I promise to keep the most interesting case for the end.
Read all articles from this series
1) Using HTML attributes to register different events.
<!-- button has both click and focus event registered-->
<button id="button" onclick="handleClick()" onfocus="handleFocus()">Click</button>
This will work just fine. We can add as many compatible event listeners to an element as we want and they will be called when corresponding events occur on that element.
2) Registering the same event with HTML attribute and DOM property but with different handler functions
<button id="button" onclick="handleClick()">Click</button>
// button has click event registered by HTML attribute as well as DOM property
function handleClick() {
console.log('handleClick called');
}
const button = document.getElementById('button');
button.onclick = function() {
console.log('DOM property handler called');
};
In this case, the DOM property method takes precedence. Thus when the button is clicked, the anonymous function assigned to the button.onclick property is invoked.
3) Registering multiple handlers for the same event using DOM property.
<button id="button">Click</button>
// click event is registered with DOM property but with different handler function each time
const button = document.getElementById('button');
button.onclick = function handler1() {
console.log('handler1 called');
};
button.onclick = function handler2() {
console.log('handler2 called');
};
button.onclick = function handler3() {
console.log('handler3 called');
};
This is the same as assigning multiple values to a variable in javascript. So, in this case, the last assignment holds true and handler3 is called when the button is clicked.
4) Registering multiple events using DOM property.
<button id="button">Click</button>
// click, mouseenter and mouseleave events are registered on button with DOM property
const button = document.getElementById('button');
button.onclick = function handler1() {
console.log('handler1 called');
};
button.onmouseenter = function handler2() {
console.log('handler2 called');
};
button.onmouseleave = function handler3() {
console.log('handler3 called');
};
This is the same as case 1. We can add as many events on an element using the DOM property and they will be registered as separate listeners.
5) Registering the same event with different handlers using addEventListener.
<button id="button">Click</button>
// click event is registered thrice with addEventListener but each with different handler function
const button = document.getElementById('button');
button.addEventListeners('click', function(){
console.log('handler 1 is called');
});
button.addEventListeners('click', function(){
console.log('handler 2 is called');
});
button.addEventListeners('click', function(){
console.log('handler 3 is called');
});
This is the second most interesting part of the post.
Could you guess the answer???
All 3 handlers execute in the order they were registered. This is particularly interesting because now we can divide our handler tasks into separate functions instead of having one big lump of code doing multi-tasking.
6) Registering the multiple events with different handlers using addEventListener.
I am not going to bore you with another set of code snippets. This is the same as adding multiple listeners for multiple events on a single element.
7) Registering the same event with HTML attribute, DOM Property, and addEventListener
<button id="button" onclick="handleClick()">Click</button>
// a button has click event registered with HTML attribute, DOM property and addEventListener at the same time but with different handlers
function handleClick(){
console.log('HTML attribute handler called');
}
const button = document.getElementById('button');
button.onclick = function(){
console.log('DOM property handler called');
}
button.addEventListeners('click', function(){
console.log('addEventListener handler called');
});
As promised, I have kept the most interesting part for the end. This question has been bothering me since I started learning about DOM Events.
In this situation, only 2 event handlers are fired for the registered event on the button. The one with DOM property and the one with addEventListener. DOM property overwrites the HTML attribute value.
References
Finally
This concludes the event registration methods.
In the next article, we will take a look at a very interesting topic, Event Phases. Having a proper understanding of event phases, we can solve many practical problems in UI development.
Stay tuned...