(Section 1 Section 2 Section 3 Section 5)
Event
attributes
These attributes define actions that happen in response to
user interactions, such as mouse clicks or key presses.
onclick: Executes a JavaScript function when
an element is clicked.
onmouseover: Triggers an action when a mouse
moves over an element.
onload: Runs a script when an object has
finished loading.
onsubmit: Executes a script when a form is submitted.
onclick attributes
The onclick attribute in HTML is an event handler
that allows you to execute a script, typically a JavaScript function, when a
user clicks on an HTML element. It is a fundamental tool for creating
interactive and dynamic web pages by responding to user actions.
Placement:
The onclick attribute is placed directly within the
opening tag of an HTML element, such as
a <button>, <a> (anchor), <div>, <img>,
or even a <p> tag.
Syntax
<element onclick="JavaScript_code_or_function()">
Program to
change the color when user clicks the text
<!DOCTYPE html>
<html>
<body>
<p id="demo"
onclick="myFunction()">Click me to change my text color.</p>
<p>A function is triggered when the p element is
clicked. The function sets the color of the p element to red.</p>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
</body>
</html>
Output
Click me to change my
text color.
A function is triggered when the p element is clicked. The
function sets the color of the p element to red.
Program to
copy the text when user clicks on the button
<!DOCTYPE html>
<html>
<body>
Field1: <input type="text" id="field1"
value="Hello World!"><br>
Field2: <input type="text" id="field2"><br><br>
<button onclick="myFunction()">Copy
Text</button>
<p>A function is triggered when the button is clicked.
The function copies the text from Field1 into Field2.</p>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
</body>
</html>
Output
onmouseover attributes
The onmouseover attribute in HTML is an event attribute that triggers a
script when the mouse pointer moves over an element. It is commonly used
to execute JavaScript code in response to a user hovering their mouse over a
specific HTML element.
Key characteristics
of onmouseover:
Event Trigger:
It fires when the mouse cursor enters the
boundaries of the element to which it is attached.
Syntax:
1
<element onmouseover="script">
2<element
onmouseover="JavaScript_code_or_function_call">
<!-- Content of the element -->
</element>
3<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">
Program
<!DOCTYPE html>
<html>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>The function bigImg() is triggered when
the user mouse over the image. This function enlarges the image.</p>
<p>The function normalImg() is triggered
when the mouse pointer is moved out of the image. That function sets the height
and width of the image back to normal.</p>
<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</body>
</html>
Output
onload attributes
The onload attribute in HTML is an event handler that triggers a script
or function when a specific object has finished loading. It is most
commonly used with the <body> element to execute JavaScript once the entire web page,
including all its resources like images, scripts, and CSS files, has completely
loaded.
Key characteristics and
uses of the onload attribute:
Event Trigger:
It
fires when an associated object or the entire document finishes loading.
Common Usage:
Primarily
used with the <body> tag to initialize scripts, manipulate
the DOM, fetch data, or set up interactive features after the page is fully
rendered.
Supported Elements:
While
most frequently used with <body>, it can also be applied to
other elements that can "load" content, such as <img>, <script>, <link>, <style>, <iframe>, <frame>,
and <frameset>.
Syntax:
The onload attribute
takes a JavaScript script or function call as its value.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
Output
Hello World!
onsubmit attributes
The <form
onsubmit="..."> attribute in HTML is used to execute a
JavaScript function or script when a user submits a form, whether by clicking a
submit button or pressing the Enter key. It allows for form validation and
other actions to occur before the form data is sent, providing control over the
submission process. To prevent the default form submission, the script
within the onsubmit attribute should return false.
How to use it
Add it to
a <form> tag: The onsubmit attribute is placed
directly within the <form> element.
Provide a JavaScript function: Assign a JavaScript function
to the attribute to handle the event.
Prevent default submission: The assigned function must
return false to stop the browser from performing the default form
submission action.
Example
<!DOCTYPE html>
<html>
<body>
<p>When you submit
the form, a function is triggered which alerts some text.</p>
<form
action="/action_page.php" onsubmit="myFunction()">
Enter name: <input type="text"
name="fname">
<input type="submit"
value="Submit">
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
</body>
</html>
Output
Key aspects
Execution: The script runs when the form
is submitted.
Validation: Its primary use is to validate
user input before data is sent to the server.
Event-driven: It's a part of the event
handling system in HTML and JavaScript.
Event object: An event object is automatically created and can be passed to the function, though this depends on the browser's event model.
No comments:
Post a Comment