JavaScript - Events
- Introduction to JavaScript events
- Execute script on user action
- JavaScript event categories
- Common JavaScript events
With the help of JavaScript events,
you can design your webpage in such a way that your webpage can respond to the
user's activity and makes the necessary changes accordingly. By using events,
your web page becomes even more dynamic and interactive.
Execute Script on User Action
Most events are generated by the
user. So far, all the web pages you have created are fully loaded once. It
means, there is no part in the webpage that remains to be loaded. But it may be
that you want to load some information according to the user. As the user
clicks on a link or selects an item from the menu, the page changes accordingly.
You can do this with the help of a JavaScript event.
You can use every event as an HTML
attribute and handle all the events related to that tag. For example, you can
use the onClick() event related to the button. As soon as a user clicks on the button,
he can take action.
For example, if you add an alert box
to the webpage, it shows up as soon as the webpage loads. But if you want that
alert box to show when the user clicks on a button or link, then for this you
will use events. Look at the example given below.
Example1: Without event
<!DOCTYPE html>
<html>
<head>
<title> Without Events Example </title>
<script type = "text/javascript">
// Alert message loading with webpage
alert("Hello, this is a warning box without events.");
</script>
</head>
<body>
<p> If you want to display this alert box according to a situation then you should use events. </p></body>
<head>
<title> Without Events Example </title>
<script type = "text/javascript">
// Alert message loading with webpage
alert("Hello, this is a warning box without events.");
</script>
</head>
<body>
<p> If you want to display this alert box according to a situation then you should use events. </p></body>
</html>
In the above example, when the webpage loads, the alert box will also be loaded with it, you can not call it a dynamic webpage. The above script generates the below output.
<!DOCTYPE html>
<html>
<head>
<title> With onClick Events Example </title>
<script type="text/javascript">
// Defining function
function message()
{
alert ("This alert box will display when someone clicks on link.");
}
</script>
</head>
<body>
// Calling
<a href="#" onclick="message();"> Click Here </a> </body>
<head>
<title> With onClick Events Example </title>
<script type="text/javascript">
// Defining function
function message()
{
alert ("This alert box will display when someone clicks on link.");
}
</script>
</head>
<body>
// Calling
<a href="#" onclick="message();"> Click Here </a> </body>
</html>
The above example is given below with the onclick event.
JavaScript Event Categories
JavaScript events have been divided
into different categories. Such as related to mouse comes in mouse event
category and related to form comes in the form event category. There are mostly
five categories of JavaScript events.
Mouse Events
onclick, onmouseover, onmouseout,
ondbclick, onmousedown,
Form Events
onblur, onchange, onfocus, onselect,
onsubmit, onreset
Keyboard Events
onkeypress, onkeydown, onkeyup
Frame Events
onload, onunload, onresize, onscroll,
onunload, onerror
Media Events
onplay, onpause, onerror, onprogress,
onplaying
Common JavaScript Events
Below are some of the common events
of JavaScript. These are the events that are used regularly.
onclick = ""
This is a mouse event. You can use it
with clickable components (link, button). The defined JavaScript function calls,
as the click on the Component.
onfocus = ""
This is a form event. As soon as the
form gets focus, the script executes.
onblur- ""
This is also a form event, which
executes the script as soon as the focus away from the form.
onchange = ""
As soon as there is a change in the
component, it executes the event script. As if any other item from the list is
selected.
onSelect = ""
When the user selects the text, then
this event calls the define function.
onmouseover = ""
As soon as the mouse moves to the
component, the script executes.
onmouseout = ""
As soon as the mouse is removed from
the component, it executes the event script.
onload = ""
As soon as the page loading is
completed, the script executes.
onunload = ""
As soon as a new window is opened in
the browser executes the event script.
onsubmit =
""
As soon as the form is submitted, this event calls the defined function.
<<-- PREVIOUS NEXT -->>
This is really nice post, I love this content also visit website designer in jaipur. Thanks for sharing.
ReplyDelete