How To Use addEventListener() Method Using JavaScript?
Nov 23, 2021 . Admin
Hello Friends,
Now let's see example of how to use addEventListener() method example. We will check how to use addEventListener() method. This is a short guide on use addEventListener() method in javascript. Here you will learn how to use javascript addEventListener() method. Let's get started with how to use addEventListener() method in javascript.
Here i will give you many example how to use addEventListener() method using javascript.
Example : 1
<!DOCTYPE html>
<html>
<head>
<title>How To Use addEventListener() Using JavaScript? - MyWebtuts.com</title>
</head>
<body>
<h3>How To Use addEventListener() Using JavaScript? - MyWebtuts.com</h3>
<p> Click the following button to see the effect. </p>
<button id = "btn">Click me!</button>
<p id = "tst"></p>
<script>
document.getElementById("btn").addEventListener("click", a1);
function a1() {
document.getElementById("tst").innerHTML = "MyWebtuts.com" + "<br>" + "Welcome to the MyWebtuts.com";
}
</script>
</body>
</html>
Output :
MyWebtuts.com Welcome to the MyWebtuts.comExample : 2
<!DOCTYPE html>
<html>
<head>
<title>How To Use addEventListener() Using JavaScript? - MyWebtuts.com</title>
</head>
<body>
<p>How To Use addEventListener() Using JavaScript? - MyWebtuts.com</p>
<p> Click the following button to see the effect.</p>
<button id = "a1"> Click me </button>
<p id = "b1"></p>
<p id = "c1"></p>
<script>
function fun() {
alert("Welcome to the MyWebtuts.com");
}
function fun1() {
document.getElementById("b1").innerHTML = "This is second function";
}
function fun2() {
document.getElementById("c1").innerHTML = "This is third function";
}
var a1btn = document.getElementById("a1");
a1btn.addEventListener("click", fun);
a1btn.addEventListener("click", fun1);
a1btn.addEventListener("click", fun2);
</script>
</body>
</html>
Output :
Welcome to the MyWebtuts.com(Alert Message) This is second function This is third function
It will help you...