<!DOCTYPE html>
<
html
>
<
head
>
<
title
>DOM Location host Property</
title
>
<
style
>
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
h2
>addEventListener() method</
h2
>
<
p
>
This example uses the addEventListener()
method to add many events on the same
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
>"
this.style.backgroundColor = "red"
}
function mySecondFunction() {
document.getElementById("demo").innerHTML += "Clicked!<
br
>"
}
function myThirdFunction() {
document.getElementById("demo").innerHTML += "Moused out!<
br
>"
}
</
script
>
</
body
>
</
html
>