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: [Link]('event', handler)
Advantages: Multiple handlers, separation of concerns
1. Click Event
<!DOCTYPE html>
<html>
<body>
<button id="clickBtn">Click Me</button>
<script>
[Link]("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!");
}
[Link]("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>
[Link]("box").addEventListener("mouseover", () => {
[Link]("box").[Link] = "lightblue";
});
</script>
</body>
</html>
5. Mousemove Event
<!DOCTYPE html>
<html>
<body>
<h3>Move your mouse</h3>
<script>
[Link]("mousemove", function(event) {
[Link](`X: ${[Link]}, Y: ${[Link]}`);
});
</script>
</body>
</html>
6. Event Object Use
<!DOCTYPE html>
<html>
<body>
<button id="eventBtn">Click Me</button>
<script>
[Link]("eventBtn").addEventListener("click", function(event) {
alert("Event type: " + [Link] + "\nTarget: " + [Link]);
});
</script>
</body>
</html>
7. Double Click Event
<!DOCTYPE html>
<html>
<body>
<button id="dblBtn">Double Click</button>
<script>
[Link]("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 = [Link]("hoverBox");
[Link]("mouseenter", () => [Link] = "green");
[Link]("mouseleave", () => [Link] = "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>
[Link]("keydown", function(event) {
alert("Key pressed: " + [Link]);
});
</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>
[Link]("myForm").addEventListener("submit", function(e) {
[Link]();
alert("Form submitted!");
});
</script>
</body>
</html>
11. Change Event (Input Field)
<!DOCTYPE html>
<html>
<body>
<input type="text" id="inputBox" placeholder="Type something" />
<script>
[Link]("inputBox").addEventListener("change", function() {
alert("Input changed to: " + [Link]);
});
</script>
</body>
</html>
12. Blur and Focus
<!DOCTYPE html>
<html>
<body>
<input type="text" id="textInput" />
<script>
const input = [Link]("textInput");
[Link]("focus", () => [Link] = "lightyellow");
[Link]("blur", () => [Link] = "");
</script>
</body>
</html>
Event Propagation
Event Propagation
Bubbling vs Capturing
Real-world analogy (bubbling up through layers)
[Link]()
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>
[Link]("outer").addEventListener("click", () => alert("Outer clicked"));
[Link]("inner").addEventListener("click", function(e) {
[Link]();
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>
[Link]("myList").addEventListener("click", function(e) {
if ([Link] === "LI") {
alert("You clicked: " + [Link]);
}
});
</script>
</body>
</html>
Misc.
15. Prevent Default (Link)
<!DOCTYPE html>
<html>
<body>
<a href="[Link] id="myLink">Go to Example</a>
<script>
[Link]("myLink").addEventListener("click", function(e) {
[Link]();
alert("Navigation stopped.");
});
</script>
</body>
</html>
16. Resize Event
<!DOCTYPE html>
<html>
<body>
<script>
[Link]("resize", () => {
[Link]("Window resized to", [Link], "x", [Link]);
});
</script>
</body>
</html>
17. Scroll Event
<!DOCTYPE html>
<html style="height:2000px">
<body>
<script>
[Link]("scroll", () => {
[Link]("Scroll Y position:", [Link]);
});
</script>
</body>
</html>
18. Remove Event Listener
<!DOCTYPE html>
<html>
<body>
<button id="onceBtn">Click Me Once</button>
<script>
function clickOnce() {
alert("Clicked once!");
[Link]("click", clickOnce);
}
[Link]("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>
[Link]("toggleBtn").addEventListener("click", () => {
[Link]("menu").[Link]("hidden");
});
</script>
</body>
</html>
20. Summary Demo (Multiple
Events)
<!DOCTYPE html>
<html>
<body>
<button id="mainBtn">Hover or Click Me</button>
<script>
const btn = [Link]("mainBtn");
[Link]("click", () => alert("Clicked!"));
[Link]("mouseover", () => [Link] = "lightgreen");
[Link]("mouseout", () => [Link] = "");
</script>
</body>
</html>
