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.)
