Scribd
Upload
26 views

Javascript Events

The document discusses different JavaScript event types including mouse events like onmouseover and onmouseout, keyboard events like onkeydown and onkeypress, and form events like onsubmit. Examples are provided for each event type to demonstrate how to use them.

Uploaded by

Shakib Al Hasan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
26 views

Javascript Events

The document discusses different JavaScript event types including mouse events like onmouseover and onmouseout, keyboard events like onkeydown and onkeypress, and form events like onsubmit. Examples are provided for each event type to demonstrate how to use them.

Uploaded by

Shakib Al Hasan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

Javascript events

• Events are actions or occurrences that happen


in the system you are programming, which the
system tells you about so you can respond to
them in some way if desired.
• For example, if the user clicks a button on a
webpage, you might want to respond to that
action by displaying an information box

Navneet Kaur
Javascript mouse events
• Onmouseover
• Onmouseout
• Onclick
• Onload
• Onchange
• Onsubmit

Navneet Kaur
Javascript key events
• Onkeypress
• Onkeyup
• onkeydown

Navneet Kaur
onmouseover and onmouseout event type

• The onmouseover event triggers when you


bring your mouse over any element and
the onmouseout triggers when you move your
mouse out from that element

Navneet Kaur
onmouseover and onmouseout example
<html>

<script>
function big(x) 
{
  x.style.height = "100%";
  x.style.width = "100%";
}
function small(x) 
{
  x.style.height = "200px";
  x.style.width = "200px";
}
</script>

<body>

<table bgcolor="powderblue" align="center" border="2" onmouseover="big(this)" onmouseout="small(this)" width="200" height="200">
<tr>
<th>Name</th>
<th>Reg No</th>
</tr>

<tr style="text-align: center;">
<td>Ram</td>
<td>119</td>
</tr>
<tr style="text-align: center;">
    <td>Shaam</td>
    <td>120,</td>
    </tr>

</table>

</body>
</html>

Navneet Kaur
onmouseover and onmouseout example
<html>
<p> when mouse is moved over the color name, background color changes </p>
<a onmouseover=document.bgColor='green' onmouseout=document.bgColor='white'>Bright
Green</a><br>
<a onmouseover=document.bgColor='red' onmouseout=document.bgColor='white'>Red</a><br>
<a onmouseover=document.bgColor='magenta'
onmouseout=document.bgColor='white'>Magenta</a><br>
<a onmouseover=document.bgColor='purple'
onmouseout=document.bgColor='white'>Purple</a><br>
<a onmouseover=document.bgColor='blue' onmouseout=document.bgColor='white'>Blue</a><br>
<a onmouseover=document.bgColor='yellow'
onmouseout=document.bgColor='white'>Yellow</a><br>
<a onmouseover=document.bgColor='black' onmouseout=document.bgColor='white'>Black</a><br>
<a onmouseover=document.bgColor='orange'
onmouseout=document.bgColor='white'>Orange</a><br>
</html>

Navneet Kaur
Onclick event type
• This is the most frequently used event type
which occurs when a user clicks the left button
of his mouse. You can put your validation,
warning etc., against this event type.

Navneet Kaur
Onclick event example
<html>

<script>
function hai()
{
alert("Hey all!!!!")
}
</script>

<body>
<button onclick=“hai()">click here</button>
</body>

</html>

Navneet Kaur
Onload event type
• The onload event occurs when an object has
been loaded.

Navneet Kaur
Onload event example
<html>

<script>
function hai()
{
alert(“Hai !!, I am loaded");
}
</script>

<body onload=“hai()">
</body>

</html>

Navneet Kaur
Onchange event type
• The onchange event occurs when the value of
an element has been changed.

Navneet Kaur
Onchange event example
<html>

<script>
function hai()
{
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>

<body>
Enter your name: <input id="fname" onchange=“hai()">
</body>

</html>

Navneet Kaur
Onchange event example
<html>

<script>
function hai()
{
var x = document.getElementById("fname");
x.style.backgroundColor="powderblue";
}
</script>

<body>
Enter your name: <input id="fname" onchange=“hai()">
</body>

</html>

Navneet Kaur
Onsubmit event type
• The onsubmit event occurs when a form is
submitted.

Navneet Kaur
Onsubmit event example
<html>

<script>
function hai()
{
alert("The form has been submitted");
}
</script>

<body>

<form onsubmit=“hai()">
Enter name: <input type="text" name="fname">
<input type="submit">
</form>
</body>

</html>

Navneet Kaur
Onkeypress event type
• The onkeypress event occurs when the user
presses a key (on the keyboard).

Navneet Kaur
Onkeypress event example
<html>

<script>
function hai()
{
alert("Enter a value");
}
</script>

<body>
<input type="text" onkeypress=“hai()">
</body>

</html>

Navneet Kaur
Onkeyup event type
• The onkeyup event occurs when the user
releases a key (on the keyboard).

Navneet Kaur
Onkeyup event example
<html>

<script>
function hai()
{
alert("Enter your name");
}
</script>

<body>
<input type="text" onkeyup=“hai()">
</body>

</html>

Navneet Kaur
Onkeydown event type
• The onkeydown event occurs when the user is
pressing a key (on the keyboard).

Navneet Kaur
Onkeydown event example
<html>

<script>
function hai()
{
alert("Enter your name");
}
</script>

<body>
<input type="text" onkeydown=“hai()">
</body>

</html>

Navneet Kaur
Difference between onkeydown() and
onkeypress()
The keypress event is sent to an element
when the browser registers keyboard input.
This is similar to the keydown event, except
that modifier and non-printing keys such as
Shift, Esc, and delete trigger keydown events
but not keypress events. Other differences
between the two events may arise depending
on platform and browser.

Navneet Kaur

You might also like