Scribd
Upload
18 views4 pages

Event & Eventlisner

The document describes different types of events that can occur when interacting with HTML elements and how to attach event handlers to handle those events. It provides examples of using event handlers for click, double click, mouseover, contextmenu, and toggling between light and dark mode.

Uploaded by

patilniraj277
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views4 pages

Event & Eventlisner

The document describes different types of events that can occur when interacting with HTML elements and how to attach event handlers to handle those events. It provides examples of using event handlers for click, double click, mouseover, contextmenu, and toggling between light and dark mode.

Uploaded by

patilniraj277
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>

<body>
<h1
onclick="console.log('Hi')">hola9</h1>
<h2 onclick="clicked()">Pune</h2>
<p id="p1">This is para1</p>
<p id="p2">This is para2</p>
<p id="p3">This is para3</p>
<p id="p4">This is para4</p>
<button id="btn1">Click</button>
<p id="para">Good Evening</p>

<script src="event.js"></script>
</body>

</html>
/*
***Events***:
- Events are actions performed by users on
html elements which can be taken care of by
using event handlers.

*** Event Handlers***:


- Event handlers are html attributes with
executes a functions when event occurs in the
element.

***addEventListene() Method:
- Add an event listener that fires when a
user click a button.
- The addEventListener() method attaches an
event handler to the specified element.

*/
function clicked() {
console.log("click");
}

let a = document.getElementById("p1");
let b = a.addEventListener("click", function
() {
a.style.color = "blue";
});
//double click
let a1 = document.getElementById("p2");
let b1 = a1.addEventListener("dblclick",
function () {
a1.style.color = "blue";
});

//changes on mouseover
let a2 = document.getElementById("p3");
let b2 = a2.addEventListener("mouseover",
function () {
a2.style.backgroundColor = "yellow";
console.log("mousover");
});
//changes on mouse right click
let a3 = document.getElementById("p4");
let b3 = a3.addEventListener("contextmenu",
function () {
a3.style.backgroundColor = "red";
console.log("right click in mouse");
});

//light/dark mode
let modebtn =
document.getElementById("btn1");
let currmode = "light";
let body = document.querySelector("body");
let para = document.querySelector("#para");
modebtn.addEventListener("click", function ()
{
if (currmode === "light") {
currmode = "dark";
body.style.backgroundColor = "black";
body.style.color = "white";
} else {
currmode = "light";
body.style.backgroundColor = "white";
body.style.color = "black";
}
});

You might also like