Introduction:
An event is something that happens when user interact
with the web page, such as when he clicked a link or button,
entered text into an input
box or textarea, made selection
in a select box, pressed key
on the keyboard, moved the mouse pointer,
submits a form,
etc. In some
cases, the Browser itself
can trigger the events, such as the page load and unload
events.
When an event occur, you can use a JavaScript event handler (or an event
listener) to detect them and perform specific task or
set of tasks. By convention, the names for event handlers always begin with the
word "on", so an event handler for the click event is called onclick,
similarly an event handler for the load event is called onload,
event handler for the blur event
is called onblur, and so on.
What is Form Event?
Event is an activity
that represent a change in theenvironment.
A JavaScript event is an action that can be detected by JavaScript. Many
of them are initiated by user action but the browser generates
some.
Event is triggered &
then it can be caught
by JavaScript functions, which then do something response.
Event handler
is a script that are executed in response to these events.
Event handler enables the
web documents to respond the user activities through the browser
window.
Event are specified in
lowercase & these are case sensitive.
Form Event:
A form event
is fired when a form control receive
or loses focus
or when the user modify
a form control value
such as by typing text in a text input,
select any option
in a select box etc.
Here're some most important
form events and their event handler.
1.
The Focus Event (onfocus)
The focus event occurs when the user gives focus
to an element on a web page. You
can handle the focus event with the onfocus event handler.
2. The Blur Event (onblur)
The blur event occurs when the user takes the focus away from a form element
or a window. You can handle
the blur event with the onblur event handler.
3.
The Change Event (onchange)
The change event
occurs when a user changes
the value of a form
element. You can handle
the change event with the onchange event
handler.
4. The Submit Event
(onsubmit)
The submit event
only occurs when the user submits a form on a web page.
You can handle the submit event with the onsubmit
event handler.
Document/Window Events:
Events are also triggered in situations when the page has loaded or when user resize
the browser window, etc.
Here're some most
important document/window events
and their event handler.
1.
The Load Event (onload)
The load event
occurs when a web page has finished
loading in the web browser. You can handle the load event with the onload event handler.
2. The Unload Event
(onunload)
The unload event
occurs when a user leaves
the current web page.
You can handle the unload
event with the onunload event
handler.
3.
The Resize Event (onresize)
The resize event occurs when a user resizes the browser window.
The resize event also occurs in
situations when the browser window is minimized
or maximized.
You can handle
the resize event with the onresize event handler.
Conclusion:
We understand that how to create a webpage using form events.
Programs
on Various event handler. JavaScript on onload event handler:
A]
<!DOCTYPE
html>
<html>
<body
onload="myFunction()">
<h1>Hello
World!</h1>
<script>
function
myFunction()
{
alert("Page
is loaded");
}
</script>
</body>
</html>
B]
<!DOCTYPE
html>
<html>
<body
onload="myFunction()">
<script>
function myFunction() { alert("Welcome");
}
</script>
</body>
</html>
JavaScript
on onclick event handler.
A]
<!DOCTYPE
html>
<html>
<body>
<button
onclick="document.getElementById('demo').innerHTML=Date()">The
time is?</button>
<p
id="demo"></p>
</body>
</html>
B]
<!DOCTYPE
html>
<html>
<body>
<script>
function myFunction() { alert("Welcome");
}
</script>
<button onclick="myFunction()">Greeting</button>
</body>
</html>
JavaScript on
onblur event handler.
<!DOCTYPE
html>
<html>
<body>
Enter your name: <input type="text" id="fname" onblur="myFunction()">
<p>When you leave
the input field,
a function is triggered which
transforms the input text to upper case.</p>
<script>
function
myFunction()
{
var x =
document.getElementById("fname"); x.value =
x.value.toUpperCase();
}
</script>
</body>
</html>
JavaScript on
onblur & onfocus event handler.
<!DOCTYPE html>
<html>
<body>
<p>When you enter
the input field
(child of FORM),
a function is triggered which
sets the background color
to yellow. When
you leave the input field,
a function is triggered
which removes the background color.</p>
<form id="myForm">
<input type="text"
id="myInput">
</form>
<script>
var
x = document.getElementById("myForm"); x.addEventListener("focus", myFocusFunction, true); x.addEventListener("blur",
myBlurFunction, true); function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor
= "yellow";
}
function myBlurFunction() { document.getElementById("myInput").style.backgroundColor
= "";
}
</script>
</body>
</html>
Comments
Post a Comment