Introduction to Javascript Event Listener
JavaScript Event Listeners is a method in JavaScript which waits for an event to take place. Event Listeners, also known as Event Handlers, where we can assign event listeners to particular events on a particular element. Event Listener is an interface representing an object that handles events dispatched by Event Object. Events are an important part of JavaScript as web pages respond based on the events. Some Events are user-generated, and some being generated by API calls. In this topic, we are going to learn about Javascript Event Listener.
Syntax
element.addEventListener(event, listener);- Parameters ‘event’ can be considered to be any valid JavaScript event.
- Events are used without the prefix of ‘on’ as ‘click’ or ‘mousehover.’
- ‘listener’ is the handler function that responds to the occurring event.
- JavaScript Event Listeners are divided into 2 types, i.e.,
- Interactive and Non Interactive Event Handlers,
- Interactive Event Handlers depend on User Interaction with the HTML page
- Non Interactive Event Handlers do not depend on any User Interaction.
Examples of Javascript Event Listener
Let us see few examples to understand further,
Example #1
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Event Listener</h2>
<h3>This event will show 'click' event of a button</h3>
<button id="btn">Click Here!</button>
<script>
document.getElementById("btn").addEventListener("click", function() {
document.write("<p>Hi this is the click event listener in JavaScript</p>");
});
</script>
</body>
</html>Output:
On clicking the button,
You will be able to see the test printed on the console on using the click event listener.
Example #2
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Various JavaScript Event Listeners</h2>
<h3>Using addEventListener() method to add many events for single button</h3>
<button id="btn">Try me!</button>
<p id="event"></p>
<script>
var x = document.getElementById("btn");
x.addEventListener("mouseover", mouseHoverFunction);
x.addEventListener("click", onClickFunction);
x.addEventListener("mouseout", mouseOutFunction);
function mouseHoverFunction() {
document.getElementById("event").innerHTML += "Mouse Hovered!<br>";
}
function onClickFunction() {
document.getElementById("event").innerHTML += "Button Clicked!<br>";
}
function mouseOutFunction() {
document.getElementById("event").innerHTML += "Mouse Out!<br>";
}
</script>
</body>
</html>Output:
Example #3
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Event Listeners</h2>
<p>Using addEventListener() on resize</p>
<p>Resize the window so that the resize event listener will get fired.</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
document.write("Window has been resized " + Math.random());
});
</script>
</body>
</html>Output:
On resizing the browser window here, text with some random value gets oriented on the console.
Example #4
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Multiple Event Listeners</title>
</head>
<body>
<button id="btn">Click Me<button>
<script>
function function1() {
document.write("Function 1 is executed!!");
}
function function2() {
document.write("Function 2 gets executed as Function 1 is overidden!!");
}
var btnClick = document.getElementById("btn");
btnClick.onclick = function1;
btnClick.onclick = function2;
</script>
</body>
</html>Output:
On clicking the button, function2 will be executed as assigning the second event handler would override the first.
This is one of the drawbacks for JavaScript Event Listeners. Only one event handler is to be assigned to a particular event on a particular element.
Hence to deal with this drawback, W3C has introduced to one flexible event modal called Event Listeners. And that is how this concept has been introduced in JavaScript.
Multiple Event handlers can be assigned to HTML elements, assigning multiple functions to the same event for the same element.
Example #5
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Multiple Event Listeners</title>
</head>
<body>
<button id="btn">Click Me<button>
<script>
function function1() {
alert("Function 1 is executed!!");
}
function function2() {
alert("Function 2 also gets executed!!");
}
var btnClick = document.getElementById("btn");
btnClick.addEventListener("click", function1);
btnClick.addEventListener("click", function2);
</script>
</body>
</html>Output:
On click,
Both function1 and function2 get executed.
Example #6
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Event Listeners Mouse hover and out</title>
<h2>Mouse hover and out changing colors</h2>
</head>
<body>
<button id="btn">Click Here</button>
<script>
var btnHover = document.getElementById("btn");
function setHoverColor() {
btnHover.style.background = "orange";
}
function setNormalColor() {
btnHover.style.background = "";
}
btnHover.addEventListener("mouseover", setHoverColor);
btnHover.addEventListener("mouseout", setNormalColor);
</script>
</body>
</html>Output:
On mouse hover,
Let us get to see some of the Common Event Listeners,
- Load: when the page loads
- Click: when users click on something on the page
- Mouseover: when users hover their mouse over the specified element.
- Focus: when users put their cursors in form fields
- Blur: when users leave their cursors from the form fields.
We shall see how to remove the Event Listener from the element.
Example #7
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Removing an Event Listener</title>
</head>
<body>
<button id="btn">Click Here</button>
<script>
function removeFunction() {
alert("Function will be removed here");
}
var btn = document.getElementById("btn");
btn.addEventListener("click", removeFunction);
btn.removeEventListener("click", removeFunction);
</script>
<p><strong>Note:</strong> Even though you try to click the button, no event will be fired as we have removed the click event using removeEventListener</p>
</body>
</html>Output:
Click here won’t work as there are no event listeners being sent to the button.
Conclusion
With this, we can conclude the topic ‘JavaScript Event Listeners’. We have seen Event Listener, also known as Event Handler, to assign particular events on elements. Also illustrated a few examples which will help you, people, with the hands-on needed. We have seen how multiple event listeners can be handled with addEventListener with HTML elements. It also illustrated an example of how to remove event listeners from the elements. I hope this tutorial helps to understand the concept well.