JavaScript Event
What Are JavaScript Events?
Definition: Events are actions that happen in the browser that the JS can respond to.
Examples: Click, keypress, mouse move, page load.
Importance of Events in Web
Development
Dynamic and interactive behavior
Event-driven programming model
Common Types of Events
Mouse Events: click, dblclick, mouseover
Keyboard Events: keydown, keyup
Form Events: submit, change
Window Events: load, resize
Event Listeners
Concept: Attach a function to an event
Method: addEventListener()
Syntax: element.addEventListener('event', handler)
Advantages: Multiple handlers, separation of concerns
1. Click Event
<!DOCTYPE html>
<html>
<body>
<button id="clickBtn">Click Me</button>
<script>
document.getElementById("clickBtn").addEventListener("click", () => {
alert("Button clicked!");
});
</script>
</body>
</html>
2. Inline Event (Not
Recommended)
<!DOCTYPE html>
<html>
<body>
<button onclick="alert('Clicked!')">Click Me</button>
</body>
</html>
3. Named Event Handler
<!DOCTYPE html>
<html>
<body>
<button id="btn">Click</button>
<script>
function sayHello() {
alert("Hello from named function!");
}
document.getElementById("btn").addEventListener("click", sayHello);
</script>
</body>
</html>
Mouse events
4. Mouseover Event
mouseenter, mouseleave, mousemove, mouseover
Getting cursor coordinates
4. Mouseover Event
<!DOCTYPE html>
<html>
<body>
<div id="box" style="width:100px; height:100px; background:gray;"></div>
<script>
document.getElementById("box").addEventListener("mouseover", () => {
document.getElementById("box").style.background = "lightblue";
});
</script>
</body>
</html>
5. Mousemove Event
<!DOCTYPE html>
<html>
<body>
<h3>Move your mouse</h3>
<script>
document.addEventListener("mousemove", function(event) {
console.log(`X: ${event.clientX}, Y: ${event.clientY}`);
});
</script>
</body>
</html>
6. Event Object Use
<!DOCTYPE html>
<html>
<body>
<button id="eventBtn">Click Me</button>
<script>
document.getElementById("eventBtn").addEventListener("click", function(event) {
alert("Event type: " + event.type + "\nTarget: " + event.target.tagName);
});
</script>
</body>
</html>
7. Double Click Event
<!DOCTYPE html>
<html>
<body>
<button id="dblBtn">Double Click</button>
<script>
document.getElementById("dblBtn").addEventListener("dblclick", () => {
alert("Double clicked!");
});
</script>
</body>
</html>
8. Mouse Enter & Leave
<!DOCTYPE html>
<html>
<body>
<div id="hoverBox" style="width:100px; height:100px; background:gray;"></div>
<script>
const box = document.getElementById("hoverBox");
box.addEventListener("mouseenter", () => box.style.background = "green");
box.addEventListener("mouseleave", () => box.style.background = "gray");
</script>
</body>
</html>
Keyboard events
9. Keyboard Event
keydown, keypress, keyup
Detecting which key was pressed
9. Keyboard Event
<!DOCTYPE html>
<html>
<body>
<h3>Press any key</h3>
<script>
document.addEventListener("keydown", function(event) {
alert("Key pressed: " + event.key);
});
</script>
</body>
</html>
Form events
10. Form Submit
submit, change, focus, blur
Validating forms with JavaScript
10. Form Submit
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
<input type="text" required />
<button type="submit">Submit</button>
</form>
<script>
document.getElementById("myForm").addEventListener("submit", function(e) {
e.preventDefault();
alert("Form submitted!");
});
</script>
</body>
</html>
11. Change Event (Input Field)
<!DOCTYPE html>
<html>
<body>
<input type="text" id="inputBox" placeholder="Type something" />
<script>
document.getElementById("inputBox").addEventListener("change", function() {
alert("Input changed to: " + this.value);
});
</script>
</body>
</html>
12. Blur and Focus
<!DOCTYPE html>
<html>
<body>
<input type="text" id="textInput" />
<script>
const input = document.getElementById("textInput");
input.addEventListener("focus", () => input.style.background = "lightyellow");
input.addEventListener("blur", () => input.style.background = "");
</script>
</body>
</html>
Event Propagation
Event Propagation
Bubbling vs Capturing
Real-world analogy (bubbling up through layers)
event.preventDefault()
Used to stop form submission, anchor navigation, etc.
13. stop Propagation
<!DOCTYPE html>
<html>
<body>
<div id="outer" style="padding:30px; background:lightgray;">
Outer Div
<div id="inner" style="margin-top:10px; background:white; padding:20px;">Inner Div</div>
</div>
<script>
document.getElementById("outer").addEventListener("click", () => alert("Outer clicked"));
document.getElementById("inner").addEventListener("click", function(e) {
e.stopPropagation();
alert("Inner clicked only");
});
</script>
</body>
</html>
Event Delegation
13. Event Delegation
Using a parent element to handle child events
More efficient for dynamic content
14. Event Delegation
<!DOCTYPE html>
<html>
<body>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
document.getElementById("myList").addEventListener("click", function(e) {
if (e.target.tagName === "LI") {
alert("You clicked: " + e.target.textContent);
}
});
</script>
</body>
</html>
Misc.
15. Prevent Default (Link)
<!DOCTYPE html>
<html>
<body>
<a href="https://example.com" id="myLink">Go to Example</a>
<script>
document.getElementById("myLink").addEventListener("click", function(e) {
e.preventDefault();
alert("Navigation stopped.");
});
</script>
</body>
</html>
16. Resize Event
<!DOCTYPE html>
<html>
<body>
<script>
window.addEventListener("resize", () => {
console.log("Window resized to", window.innerWidth, "x", window.innerHeight);
});
</script>
</body>
</html>
17. Scroll Event
<!DOCTYPE html>
<html style="height:2000px">
<body>
<script>
window.addEventListener("scroll", () => {
console.log("Scroll Y position:", window.scrollY);
});
</script>
</body>
</html>
18. Remove Event Listener
<!DOCTYPE html>
<html>
<body>
<button id="onceBtn">Click Me Once</button>
<script>
function clickOnce() {
alert("Clicked once!");
this.removeEventListener("click", clickOnce);
}
document.getElementById("onceBtn").addEventListener("click", clickOnce);
</script>
</body>
</html>
19. Toggle Class on Click
<!DOCTYPE html>
<html>
<body>
<button id="toggleBtn">Toggle Menu</button>
<div id="menu" class="hidden">Menu Content</div>
<style>.hidden { display: none; }</style>
<script>
document.getElementById("toggleBtn").addEventListener("click", () => {
document.getElementById("menu").classList.toggle("hidden");
});
</script>
</body>
</html>
20. Summary Demo (Multiple
Events)
<!DOCTYPE html>
<html>
<body>
<button id="mainBtn">Hover or Click Me</button>
<script>
const btn = document.getElementById("mainBtn");
btn.addEventListener("click", () => alert("Clicked!"));
btn.addEventListener("mouseover", () => btn.style.background = "lightgreen");
btn.addEventListener("mouseout", () => btn.style.background = "");
</script>
</body>
</html>
