Complete Lecture on DOM Events in JavaScript
1. Introduction to DOM Events
What is an Event?
An event is an action that occurs in the browser. It can be triggered by: - User actions
mouse) - Browser actions (page load, resize) - Form interactions (submit, focus)
JavaScript listens for these events and executes code when they occur.
2. Ways to Add Events in JavaScript
Method 1: Inline HTML (Not Recommended)
<button onclick="alert('Button Clicked')">Click Me</button>
Method 2: Using DOM Property
<button id="btn">Click Me</button>
<script>
let btn = [Link]("btn");
[Link] = function() {
alert("Button Clicked");
};
</script>
Method 3: addEventListener() (Recommended)
<button id="btn">Click Me</button>
<script>
let btn = [Link]("btn");
[Link]("click", function() {
alert("Button Clicked");
});
</script>
1
3. Mouse Events
Mouse events occur when interacting with the mouse.
List of Mouse Events
• click
• dblclick
• mousedown
• mouseup
• mousemove
• mouseenter
• mouseleave
• mouseover
• mouseout
• contextmenu
GUI Example: Mouse Events
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 200px;
height: 200px;
background-color: lightblue;
text-align: center;
line-height: 200px;
margin: 20px;
}
</style>
</head>
<body>
<div id="box">Hover or Click Me</div>
<script>
let box = [Link]("box");
[Link]("click", () => {
[Link] = "green";
});
2
[Link]("dblclick", () => {
[Link] = "red";
});
[Link]("mouseenter", () => {
[Link] = "Mouse Entered";
});
[Link]("mouseleave", () => {
[Link] = "Hover or Click Me";
});
[Link]("contextmenu", (e) => {
[Link]();
alert("Right Click Disabled");
});
</script>
</body>
</html>
4. Keyboard Events
Keyboard events occur when a key is pressed or released.
List of Keyboard Events
• keydown
• keypress (deprecated)
• keyup
GUI Example: Keyboard Events
<!DOCTYPE html>
<html>
<body>
<input type="text" id="inputBox" placeholder="Type something">
<p id="output"></p>
<script>
3
let input = [Link]("inputBox");
let output = [Link]("output");
[Link]("keydown", function(event) {
[Link] = "Key Down: " + [Link];
});
[Link]("keyup", function(event) {
[Link] = "Key Released: " + [Link];
});
</script>
</body>
</html>
5. Form Events
List of Form Events
• submit
• change
• input
• focus
• blur
• reset
GUI Example: Form Events
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
<input type="text" id="name" placeholder="Enter Name"><br><br>
<button type="submit">Submit</button>
</form>
<p id="message"></p>
<script>
let form = [Link]("myForm");
let nameInput = [Link]("name");
4
let message = [Link]("message");
[Link]("focus", () => {
[Link] = "yellow";
});
[Link]("blur", () => {
[Link] = "white";
});
[Link]("input", () => {
[Link] = "Typing: " + [Link];
});
[Link]("submit", (e) => {
[Link]();
alert("Form Submitted Successfully");
});
</script>
</body>
</html>
6. Window Events
List of Window Events
• load
• DOMContentLoaded
• resize
• scroll
• unload
• beforeunload
GUI Example: Window Events
<!DOCTYPE html>
<html>
<body style="height:2000px;">
<h2>Scroll Down</h2>
<p id="scrollStatus"></p>
5
<script>
[Link]("load", () => {
[Link]("Page Fully Loaded");
});
[Link]("resize", () => {
[Link]("Window Resized");
});
[Link]("scroll", () => {
[Link]("scrollStatus").innerText = "Scrolling...";
});
</script>
</body>
</html>
7. Clipboard Events
• copy
• cut
• paste
[Link]("copy", () => {
alert("Content Copied");
});
8. Drag and Drop Events
List
• drag
• dragstart
• dragend
• dragenter
• dragleave
• dragover
• drop
6
GUI Example
<!DOCTYPE html>
<html>
<body>
<div id="dragItem" draggable="true" style="width:100px;height:
100px;background:red;"></div>
<div id="dropZone" style="width:200px;height:200px;background:lightgray;margin-
top:20px;"></div>
<script>
let dragItem = [Link]("dragItem");
let dropZone = [Link]("dropZone");
[Link]("dragstart", () => {
[Link]("Dragging Started");
});
[Link]("dragover", (e) => {
[Link]();
});
[Link]("drop", () => {
[Link](dragItem);
});
</script>
</body>
</html>
9. Media Events
• play
• pause
• ended
• volumechange
• timeupdate
let video = [Link]("video");
[Link]("play", () => {
7
[Link]("Video Playing");
});
10. Event Object
Every event provides an event object.
Common properties: - [Link] - [Link] - [Link] - [Link] - [Link]
[Link]() - [Link]()
Example:
[Link]("click", function(event) {
[Link]("Clicked element:", [Link]);
});
11. Event Bubbling and Capturing
Bubbling
Event moves from child to parent.
Capturing
Event moves from parent to child.
Example:
[Link]("parent").addEventListener("click", () => {
alert("Parent Clicked");
}, true); // true = capturing
12. Removing Event Listeners
function greet() {
alert("Hello");
8
}
[Link]("click", greet);
[Link]("click", greet);
13. Summary
You have learned: - What DOM events are - All major event categories - Mouse, Keyboard, F
Clipboard, Drag & Drop, Media events - Event object - Bubbling and Capturing - Removing event listeners
This completes the full detailed lecture on DOM Events in JavaScript.