JavaScript Events Example

A JavaScript can be executed when an event occurs, like when a user clicks on button, move mouse over of control in HTML element
In this artical i will show you list of events that handles  JavaScript in HTML page.

All the HTML document has many kind of events such as page loads is an events, button click is an events, mouseover on textbox is an events.
when user press any key then javascript onclick  events occurs.

Here is the list of JavaScript events.

 Event                                      Description

onclick :- JavaScript runs when a mouse click event occurs
onchange :- JavaScript runs when the element changes event occurs
onsubmit :- JavaScript runs when the form is submittedevent occurs
onreset :- JavaScript runs when the form is resetevent occurs
onselect :- JavaScript runs when the element is selectedevent occurs
onblur :- JavaScript runs when the element loses focusevent occurs
onfocus :- JavaScript runs when the element gets focusevent occurs
onkeydown :- JavaScript runs when key is pressedevent occurs
onkeypress :- JavaScript runs when key is pressed and releasedevent occurs
onkeyup :- JavaScript runs when key is releasedevent occurs
ondblclick :- JavaScript runs when a mouse double-clickevent occurs
onmousedown :- JavaScript runs when mouse button is pressedevent occurs
onmousemove :- JavaScript runs when mouse pointer movesevent occurs
onmouseout :- JavaScript runs when mouse pointer moves out of an elementevent occurs
onmouseover :- JavaScript runs when mouse pointer moves over an element event occurs
onmouseup :- JavaScript runs when mouse button is released event occurs

most frequently used events are onclick and onmouseover events in JavaScript.
we will learn with an example of onclick and onmouseover and understand it.

first we will learn onclick events of JavaScript.
The onclick events is most frequently used by programmer. onclick events occurs when user clicks left button of mouse.

When we use HTML button control then use onclick event to execute JavaScript function.
If we use asp.net server control button then use onclientclick event to execute JavaScript function.

Here first we tack HTML input button to execute JavaScript function on onclick evnets occur.

Design HTML document as below:

JavaScript event example

JavaScript event example

write below code for HTML design and JavaScript function.

<html>
<head>
<script type=”text/javascript”>
function Hi()
{
alert(“Hello Meera Academy”)
}
</script>
</head>
<body>
<input type=”button” onclick=”Hi()” value=”Meera Academy” />
</body>
</html>

JavaScript event example

JavaScript event example

Now we will understand same example in ASP.Net server side button control.
Here we need to use onclientclik property to execute JavaScript like below:

Design asp.net web page with one server button control.

JavaScript event example

JavaScript event example

write below JavaScript in head section of asp.net web forms.

<head runat=”server”>
<title>JavaScript Events Example</title>
<script type=”text/javascript”>
function Hi()
{
alert(“Hello Meera Academy”)
}
</script>
</head>

Place below code in body section for button control:

<asp:Button ID=”Button4″  runat=”server” Font-Bold=”True”
Text=”Meera Academy” onclientclick=”Hi()” />

The result of asp.net onclientclick event is :

JavaScript onclientclick events in asp.net

JavaScript onclientclick events in asp.net

 

Now we will learn Example of onmouseover events in JavaScript.

onmouseover events execute when users move mouse over the control or area.

<html>
<head>
<script type=”text/javascript”>
function Hi()
{
alert(“Hello Meera Academy”)
}
</script>
</head>
<body>
<input type=”button”  onmouseover=”Hi()”  value=”Meera Academy” />
</body>
</html>

I hope this events of JavaScript tutorials will help you…..

Leave a Reply

Your email address will not be published. Required fields are marked *

2 + 3 =


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">