Scribd
Upload
7 views

JAVA SCRIPT 1

This is JavaScript documents for beginners

Uploaded by

mraffay886
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

JAVA SCRIPT 1

This is JavaScript documents for beginners

Uploaded by

mraffay886
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Java script Events(on change,onmouseover, onmouseout)

What are events?

Events are actions or occurrences, like a user clicking a button, moving the
mouse, or typing in a field, that JavaScript can detect and respond to.

Why are events important?

They make web pages interactive and dynamic, enhancing user experience.

a. onchange Event

Definition: Triggers when the value of an input element (e.g., text field,
dropdown) changes and the user moves focus away.

Use Case: Validating user input or updating content dynamically.

code:

<input type="text" id="name" onchange="updateName()" placeholder="Enter


your name">

<p id="output"></p>

<script>

function updateName() {

const name = document.getElementById("name").value;

document.getElementById("output").innerText = "Hello, " + name + "!"; }

</script>

Explanation:
<input> Tag:Creates a text box where the user can type their name.

id="name": Assigns a unique identifier to the input field so it can be accessed


in JavaScript.

onchange="updateName()": Triggers the updateName() function when the


text box value changes and the user clicks away from it.

placeholder="Enter your name": Displays a hint inside the text box.

<p> Tag:Creates a paragraph where the output ("Hello, [name]!") will be


displayed.

id="output": Assigns an ID to the paragraph for JavaScript to update its


content.

JavaScript Function (updateName):document.getElementById("name").value:


Gets the text the user typed in the input
field.document.getElementById("output").innerText: Updates the paragraph
text with the greeting.

b. onmouseover Event

Definition: Triggers when the mouse pointer moves over an element.

Use Case: Highlighting or changing styles when the user hovers over an
element.

<button onmouseover="highlight(this)"
onmouseout="removeHighlight(this)">Hover over me</button>
<script>

function highlight(element) {

element.style.backgroundColor = "yellow";

function removeHighlight(element) {

element.style.backgroundColor = "";

</script>

Explanation:

<button> Tag:

Creates a clickable button with the text "Hover over me."

onmouseover="highlight(this)": Calls the highlight() function when the mouse


pointer hovers over the button.

onmouseout="removeHighlight(this)": Calls the removeHighlight() function


when the mouse pointer leaves the button.

JavaScript Functions:

highlight(element):

element: Refers to the button that triggered the event.

element.style.backgroundColor = "yellow";: Changes the button's background


color to yellow when the mouse hovers over it.
removeHighlight(element):

element.style.backgroundColor = "";: Resets the button's background color


when the mouse leaves.

c. onmouseout Event

Definition: Triggers when the mouse pointer moves out of an element.

Use Case: Reverting changes made during onmouseover.

Example: (Combined with onmouseover above.)

You might also like