• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

Events in JavaScript with Examples

JavaScript Events

 

What is an Event?

JavaScript’s interaction with HTML is handled through events that occur when the user or browser manipulates a page.

When the page loads, that is an event. When the user clicks a button, that a click, too, is an event. Another example of events are like pressing any key, closing window, resizing window etc.

developers can use these events to execute JavaScript coded responses, which cause buttons to close windows, messages to be displayed to users, data to be validated, and virtually any other type of responses imaginable to occur.

Events are a part of the Document Object Model(DOM) Level 3 and every HTML element have a certain set of events which can trigger JavaScript code.

 

On click Event Type 

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

 

Example

<html>

<head>

<script type=”text/javascript”>

<!—

functionsayHello() {

alert(“Hello World”)

// – – >

</script>
</head>

<body>

<input type=”button” onclick=”sayHello()” value = “Say Hello”  />

</body>

</html>

 

Onsubmit event type

Another most important event type is onsubmit. This event occurs when you try to submit a form. So you can put your form validation against this event type.

Here is simple example showing its usage. Here we calling a validate() function before submitting a form data to the webserver. If validate() function returns true the form will be submitted otherwise it will not submit the data.

Example

<html>

<head>

<script type=”text/javascript”>

<!—

functionvalidation() {

all validation goes here

…………….

return either true or false

}

// – – >

</script>
</head>

<body>

<form method=”Post” action =”t.cgi” onsubmit=”return validate()”>

……………………

<input type=”submit” value=”Submit” />

</body>

</html>

 

Onmouseover and onmouseout

These two event types will help you to create nice effects with images or even with text as well. The onmouseover event occurs when you bring your mouse over any element and the onmouseout occurs when you bring your mouse over any element and the onmouseout occurs when you take your mouse out from the element.

 

Example 

Following example shows how a division reacts when we bring our mouse in that division :

<html>

<head>

<script type=”text/javascript”>

<!—

functionover() {

alert(“Mouse over”);

}

function out()

{

alert(“Mouse out”);

</script>
</head>

<body>

<div onmouseover=”over()” onmouseout=”out()”>

<h2>This is inside the division </h2>

</body>

</html>

150 complete(4pages)

155

You can change different images using these two event types or you create help balloon to help your users.

 

HTML 4 standard Events

The standard HTML 4 events are listed here for your reference. Here script indicates a Javascript function to be executed.

 

EventValueDescription
onchangescriptScript runs when the element changes
onsubmitscriptscript runs when the form is submitted
onresetscriptscript runs when the form is reset
onselectscriptScript runs when the element is selected
onselectscriptscript runs when the element is selected
onblurscriptscript runs when the element loses focus
onfocusscriptscript runs when the element gets focus
onkeydownscriptscript runs when key is pressed
onkeypressscriptscript runs when key is pressed and released
onekeyupscriptscript runs when key is relased
onclickscriptscript runs when a mouse click
ondbclickscriptscript runs when a mouse double-click
onmousedownscriptscript runs when mouse button is pressed
onmousemovescriptscript runs when mouse pointer moves
onmouseoutscriptscript runs when mouse pointer moves out of an element
onmouseoverscriptscript runs when mouse pointer moves over an element
onmouseupscriptscript runs when mouse button is released

 

 

onblur Even

<html>

<head>

<script type=”text/javascript”>

function uppercase()

{

var x=document.getElementByID(“fname”).value

document.getElementById(“fname”).value

document.getElemetnById(“fname”).value=x.touppercase()

}

</script>
</head>

<body>

Enter your name:<input type=”text” id=”fname” onblur=”uppercase()”>

</body>

</html>

 

Onchange Event

<html>

<head>

<script type=”text/javascript”>

function uppercase(x)

{

var y=document.getElementById(x).value

document.getElementById(x).value=y.toUppercase()

}

</script>

</head>

<body>

Enter your name :

<input type=”text” id=”fname” onchange=”uppercase(this.id)”>

</body>

</html>

 

Onclick Event

<html>

<body>

Field1 : <input type=”text” id=”field1” value=”Hello World!”>

<br/>

Field2: <input type=”text” id=”field2”>

<br/><br/>

click the button below to copy the content of Field1 to Field2

<br/>

<button onclick=”document.getElementById(‘field2’).value=document.getElementById(‘field1’).value”> Copy Text</button>

</body>

</html>

 

Ondbclick Event

<html>

<body>

Field1: <input type=”text” id =”field1” value=”Hello World!”>

<br/>

<button ondbclick=”document.getElementById(‘field2’).value=document.getElementByID(‘field1’).value”>Copy Text </button>

</body>

</html>

 

Onerror Event

<img src=”image.gif” onerror=”alert(‘The image could not be loaded.’) “>

 

Onfocus Event

<html>

<head>

<script type=”text/javascript”>

function setStyle(x)

{

document.getElementByid(x).style.background=”yellow”

}

</script>

</head>
<body>

First name : <input type=”text” onfocus=setstyle(this.id)” id=”fname”>

<br/>

Last name=<Input type=”text” onfocus=”setstyle(this.id)” id=”lname”>

</body>

</html>

 

Onkeydown Event

<html>
<body>

<script type=”text/javascript”>

function noNumbers( e )

{

var keynum

var keychar

var numcheck

if(window.event)  //IE

{

keynum=e.keycode

}

else if(e.which) // Netscape / Firefox/Opera

{

Keynum=e.which

}

keychar=string.fromcharcode(keynum)

numcheck=String.fromcharcode(keynum)

numcheck=/d/

return !numcheck.test(keychar)

}

</script>

<form>

<input type=”text” on keypress=”return noNumbers(event)”/>

</form>

</body>

</html>

 

on Key Up Event

<html>

<head>

<script type =”text/javascript”>

function uppercase(X)

{ var y= document .getElementById(x).value

docment.getElementby Id(x).value= y.to Uppercase();

}

</script>

</head>

<body>

Enter your name:<input type=”text” id=”fname” on keyup=”uppercase(this.id)”>

</body>

</html>

 

Onload Event

<html>

<head>

<script type=”text/javascript”>

function load()

{

alert(“page is loaded”);

}

</script>

</head>

<body onload=”load()”>

<h1> Hello World!</h1>

</body>

</html>

 

onmousedown Event

<html>

<head>

<script type=”text/javascript”>

function whichElement (e)

{

var targ

if (!e) var e =window.event

if (e.target) targ=e.target

else  if (e.srcElement) targ =e .srcElement

if (targ.nodeType ==3) //defeat Safari bug

targ=targ.parentNode

var tname

tname=targ.tagName

alert(“You clicked on a” + tname + “element.”)

}

</script>

</head>

<body onmousedown=”whichElement(event)”>

<h2> This is a header</h2>

<p> This is a paragraph</p>

<img border=”0” src=”ball16.gif” alt=”Ball”>

</body>

</html>

onmousemove Event

<img src=”image_w3default.gif” alt =”W3schools” onmousemove=”alert(‘Visit W3schools!’)”/>

 

onmouseoutEvent

<html>

<head>

<script type=”text/javascript”>

function mouseOver()

{

document .getelementbyId(“b1”).src=”b_blue.gif”

}

function mouseOut()

{

document.getElementById (“bi”).src=”b_pink.gif”

}

</script>

</head>

<body>

<a href=http://www.w3schools.com target=_”blank” onmouseover=”mouseOver()” onmouseout=”mouseOut()”>

<img border=”0” alt =”visit W3schools!”src=”b_pink.gif” id=”b1”/></a>

</body>

</html>

 

onmouseover Event

<html>

<head>

<script type =”text/javascript”>

function mouseover()

{

document.getElementByID(“b1”).src=”b_blue.gif”

}

function mouseOut()

{

document.getElementById(“b1”).src=”b_pink.gif”

}

</script>

</head>

<body>

<a href=http://www.w3schools.com target=”_blank” onmouseover=”mouseOver()” onmouseout=mouseOut()”>

<img border=”0” alt=”Visit W3 Schools!” src=”b_pink.gif” id=”b1”/></a>

</body>

</html>

 

onmouseup Event

<html>

<head>

<script type=”text/javascript”>

function whichElement(e)

{

var targ

if(!e) var e =window.event

if(e.target) targ =e.target

else is (e.srcElement) targ=e.srcElement

if (targ.nodeType ==3)// defear safari bug

targ=targ.parentNode

var tname

tname= targ.tagName

alert(“you clcike on a “ + tname + “element.”)

}

</script>

<body onmouseup=”whichElement(event)”>

<h2> This is a header</h2>

<p> This is a paragraph</p2>

<img border=”0” src=”ball16.gif” alt=”Ball”>

</body>

</html>

 

Onresize Event

<body onresize=”alert (‘you  have changed the size of the window’)”>

</body>

 

onselect Event

<form >

Select text: <input type=”text” value =”Hello World!” onselect =”alert(‘you have selected some of the text.’)”>

</form>

 

Onunload Event

<body onunload=”alert(‘The onunload event was triggered’)”>

</body>

 

Summary
Review Date
Reviewed Item
Events in JavaScript with Examples
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on Events in JavaScript with Examples"

    Leave a Message

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

    Site Disclaimer, Copyright © 2016 - All Rights Reserved.

    Support


    Please leave a message and we'll get back to you soon.

    I agree to be contacted via e-mail.