Scribd
Upload
5 views

Difference Between Let, Var, Const and Javascript Hosting

The document discusses HTML events and event handlers. It demonstrates how to add event listeners for common events like click, mouseover, and input. It also shows how to access event object properties for things like key presses and mouse coordinates.

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
5 views

Difference Between Let, Var, Const and Javascript Hosting

The document discusses HTML events and event handlers. It demonstrates how to add event listeners for common events like click, mouseover, and input. It also shows how to access event object properties for things like key presses and mouse coordinates.

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/ 6

<!

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> -->
<input type="text" name="" id="event">

<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";
// }
// });

let a = document.getElementById("event");
a.addEventListener("click", function (e) {
console.log(e);
});

//even objects
a.addEventListener("click", function (e) {
console.log(e.type);
console.log(e.shiftKey);
console.log(e.target);
});

a.addEventListener("input", function (e) {


console.log(e.target.value);
});

a.addEventListener("click", function (e) {


console.log(e.clientX, e.clientY);
});

// var a = "hello";
// var a = "world";
// console.log(a);

// let a = "hello";
// a = "world";
// console.log(a);

// const a = "hi";
// const a = "world";
// console.log(a);

// function name() {
// if (true) {
// var a = 12;
// }
// console.log(a);
// }
// name();

// //let
// function name() {
// if (true) {
// let a = 12;
// console.log(a);
// }
// //console.log(a) a is not defined.
// }
// name();

//hoisting
// hello();
// function hello() {
// console.log("hi");
// }

// var a;
// console.log(a); //unindefined
// a = 5;
// var a;
// a = 5;
// console.log(a); //5

// a = 5;
// console.log(a); //5
// var a;

You might also like