Scribd
Upload
4 views

WEB6

DOM Events

Uploaded by

Satyam Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

WEB6

DOM Events

Uploaded by

Satyam Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

WORKSHEET (Experiment 6)

Student Name: Satyam Kumar UID: 24MCA20083


Branch: MCA General Section / Group: 24MCA 2 & “A”
Semester: 1st Date of Performance: 21-10-2024
Subject Name: Web Programming Subject Code: 24CAP-605
Lab

Aim
• WAP to implement various functions of DOM.
• Demonstrate use of on mouse move and on mouse over event.
• Display a message “welcome to scripting” when a button labelled “hello” is clicked.
Display a message “Thank you for using scripting” when the same button is double
clicked.

Overview

DOM (Document Object Model):


A programming interface for web documents. It represents the structure of a
document as a tree of objects, allowing scripts to manipulate the content, structure,
and styles of web pages.

Event:
An action or occurrence recognized by the browser, such as a mouse click, key press,
or mouse movement. JavaScript can respond to these events to create interactive
web pages.
Event Handler:
A function that executes in response to a specific event. For example, when a button
is clicked, the associated event handler is called to perform a task.

`addEventListener()`:
A method used to attach an event handler to a specified element. It allows the
specified function to be executed when the event occurs. This method can handle
multiple events on the same element.

`mouse move` Event:


An event triggered when the mouse pointer is moved over an element. It can be used
to create dynamic effects based on mouse movement.

`mouseover` Event:
An event that occurs when the mouse pointer enters an element. This can be used to
trigger effects like changing the background color or text of the element.

`mouse out` Event:


An event that occurs when the mouse pointer leaves an element. It can be used to
revert changes made during the `mouseover` event.

`text Content`:
A property that gets or sets the text content of an element. It can be used to change
the displayed text without affecting the HTML structure.

Button Click Events:


`click` Event: An event triggered when an element (like a button) is clicked. It can be
used to execute a function.
`dblclick` Event: An event triggered when an element is double-clicked. It allows for
different actions to be performed based on user interaction.
Alert:
A built-in JavaScript function (`alert()`) that displays a dialog box with a specified
message and an OK button. It is often used for simple notifications to the user.

IMPLEMENTATION
(HTML + JAVASCRIPT Code)
OUTPUT:

Learning Outcomes (What I have Learnt):

✓ Learned to manipulate the Document Object Model (DOM) by selecting and modifying
HTML elements using JavaScript.
✓ Learned to handle mouse events (mousemove and mouseout) to create dynamic
interactions that enhance user experience.
✓ Learned to use alert() for displaying messages and console.log()

You might also like