JavaScript HTML DOM EventListener
The addEventListener() method
The addEventListener() method links a function to a chosen element for handling events.
The addEventListener() method adds an event handler to an element without replacing any existing event handlers.
You can attach multiple event handlers to a single element.
You can attach multiple event handlers of the same kind to a single element, like having two "click" events.
You can attach event listeners to any DOM object, not just HTML elements, such as the window object.
The addEventListener() method helps in managing how an event responds during bubbling.
When you employ the addEventListener() method in JavaScript, it helps organize your code by separating it from the HTML markup. This enhances readability and enables you to incorporate event listeners, even in situations where you lack control over the HTML markup.
You can quickly delete an event listener with the removeEventListener() method.
Syntax
element.addEventListener(event, function, useCapture);
The initial factor is the event type (such as "click" or "mousedown" or any other HTML DOM Event.)
The second part is the action we want to happen when the event takes place.
The third part is a true/false value that tells whether to use event bubbling or event capturing. You don't have to include this part if you don't need it.
Make sure not to use the on prefix when referring to the event. Instead of using onclick, use click.
Add an Event Handler to an Element
You may also look up an external function with a specific name.
Add Many Event Handlers to the Same Element
The addEventListener() method lets you attach multiple events to a single element without replacing the current events.
You can attach various types of events to a single element.
Add an Event Handler to the window Object
The method called addEventListener() lets you connect event listeners to various things on a webpage, such as elements, the document itself, the window, or other objects that can do things when events happen, such as the xmlHttpRequest object.
Passing Parameters
When you pass values for parameters, employ an 'anonymous function' that invokes the designated function
along with the specified parameters:
Event Bubbling or Event Capturing?
In HTML DOM, events can be propagated in two ways: bubbling and capturing.
Event propagation is how we determine the order of elements when an event happens. For example, if there's a <div> containing a <p> element, and the user clicks on the element, we need to decide which element's "click" event should be dealt with first.
In bubbling the event of the innermost element is dealt with before the outer one. For example, in the given scenario, the click event of the element is processed before the click event of the <div> element.
When capturing events in HTML, the outermost element's event is processed before the innermost. For example, if there is a <div> element inside a <p> element, the click event for the <div> will be processed first, followed by the click event for the element.
You can define how an event propagates using the "useCapture" parameter with the addEventListener() method.
addEventListener(event, function, useCapture);
The initial setting is set to false, meaning it employs the bubbling propagation. If the value is changed to true, the event will utilize the capturing propagation instead.
The removeEventListener() method
The removeEventListener() function eliminates event handlers linked using the addEventListener() function.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example utilizes the addEventListener() method to bind a click event to a button.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This sample code shows how to make a button respond when clicked. It uses a method called addEventListener() to connect the button with the action of clicking.</p>
<button id="myBtn">Try it</button>
<script>
document.getElementById("myBtn").addEventListener("click", function() {
alert("Hello World!");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This sample demonstrates how to make something happen when someone clicks on a button. We use a method called addEventListener() to do this.</p>
<button id="myBtn">Try it</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
alert("Hello World!");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This sample demonstrates how to make a button react when clicked twice using the addEventListener() method.</p>
<button id="myBtn">Try it</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
alert("Hello World!");
}
function someOtherFunction() {
alert("This function was also executed!");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This sample shows how to use the addEventListener() method to attach multiple events to a single button.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
document.getElementById("demo").innerHTML += "Moused over! <br> ";
}
function mySecondFunction() {
document.getElementById("demo").innerHTML += "Clicked! <br> ";
}
function myThirdFunction() {
document.getElementById("demo").innerHTML += "Moused out! <br> ";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method on the window object.</p>
<p>Try changing the size of this browser window to activate the "resize" event handler.</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function() {
document.getElementById("demo").innerHTML = Math.random();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example shows how to give values to parameters when you use the addEventListener() method.</p>
<p>Click the button to perform a calculation.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
let p1 = 5;
let p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
document.getElementById("demo").innerHTML = a * b;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv1,
#myDiv2 {
background-color: coral;
padding: 50px;
}
#myP1,
#myP2 {
background-color: white;
font-size: 20px;
border: 1px solid;
padding: 20px;
}
</style>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<h2>JavaScript addEventListener()</h2>
<div id="myDiv1">
<h2>Bubbling:</h2>
<p id="myP1">Click me!</p>
</div>
<br>
<div id="myDiv2">
<h2>Capturing:</h2>
<p id="myP2">Click me!</p>
</div>
<script>
document.getElementById("myP1").addEventListener("click", function() {
alert("You clicked the white element!");
}, false);
document.getElementById("myDiv1").addEventListener("click", function() {
alert("You clicked the orange element!");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
alert("You clicked the white element!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
alert("You clicked the orange element!");
}, true);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: coral;
border: 1px solid;
padding: 50px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>JavaScript removeEventListener()</h2>
<div id="myDIV">
<p>This box shows a number when you move your mouse over the orange area.</p>
<p>Click the button to remove the div's event handler.</p>
<button onclick="removeHandler()" id="myBtn">Remove</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery