Scribd
Upload
22 views

Event Handling in Java Script Examples

The document discusses common JavaScript events with examples. It covers the onkeyup, onload, onresize, onchange, onfocus, onblur, and onsubmit events. The onkeyup event triggers when a key is released after pressing. The onload event occurs when a web page finishes loading. The onresize event triggers when the browser window is resized. The onchange event occurs when the value of a form element changes. The onfocus event executes when an element receives focus. The onblur event occurs when an element loses focus. The onsubmit event triggers when a form is submitted.

Uploaded by

ypnarasimharaocse
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

Event Handling in Java Script Examples

The document discusses common JavaScript events with examples. It covers the onkeyup, onload, onresize, onchange, onfocus, onblur, and onsubmit events. The onkeyup event triggers when a key is released after pressing. The onload event occurs when a web page finishes loading. The onresize event triggers when the browser window is resized. The onchange event occurs when the value of a form element changes. The onfocus event executes when an element receives focus. The onblur event occurs when an element loses focus. The onsubmit event triggers when a form is submitted.

Uploaded by

ypnarasimharaocse
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

NIELIT Gorakhpur

COURSE NAME: O level SUBJECT: WEB DESIGNING AND PUBLISHING

TOPIC: JavaScript DATE: 28/05/2020

JS events cont’d

Common Events in JavaScript with Examples

1. Onkeyup event: This is a keyboard event and event is triggered whenever a key is
released after pressing.

<html>
<head>
<script>
function chgBG() {
var x = document.getElementById('bg');
bg.style.backgroundColor = 'orange';
}
</script>
</head>
<body>
<h2> Changing of Background Color, once release the key after type</h2>
<p> Test Color is Blue </p>
<input id="bg" onkeyup="chgBG()"
placeholder="Type Here" style="color:blue">
</body>
</html>

1
As you start typing and release the key, and background color of Text Box placeholder changes
to orange color.

2. Onload event: The onload event occurs when a web page has finished loading in the
web browser. We may invoke the event on individual HTML element also.

<html>
<head>Onload Event</head>
</br>
<h2> Display Alert Message on Loading of Page successfully </h2>
<body onload="window.alert('This page has been successfully loaded');">
<script>
document.write("This page has been successfully loaded");
</script>
</body>
</html>

2
3. Onresize : The onresize event occurs when a user resizes the browser window, or it is
minimized or maximized.

<html >
<head>
<h2>Resize Event</h2>
</head>
<body>
<p> we are displaying window size on resizing the browser window. Resize and see</p>
<p id="result"> </p>
<script>
function disWinSize(){
var w = window.outerWidth;
var h = window.outerHeight;
var txt = "Window size: width=" + w + ", height=" + h;
document.getElementById("result").innerHTML = txt;
}
window.onresize = disWinSize;
</script>
</body>
</html>

And now resize the browser window and see the result in browser itself.

3
4. Onchange event: The onchange event occurs when a user changes the value of a form
element. Here we are choosing an item from the list.

<html >
<head>
<h2>On Change Event</h2>
</head>
<body>
<p> Choose any option from the select box for getting onchnage event
result</p>
<h4>My favorite Fruit is</h4>
<select onchange="alert('Data from Selection List has been Changed');">
<option>Mango</option>
<option>Banana</option>
<option>Orange</option>
</select>
</body>
</html>

4
5. Onfocus Event : whenever, the focus is received by the element specified, this event
executes.
<html>
<head>
<h2> On Focus Event</h2>
<script>
function foc() {
var e = document.getElementById('ip');
if (confirm('Please enter your name correctly')) {
e.blur();
}}
</script>
</head>
<body>
<p >Get the focus into the input box </p>
<input id="ip" onfocus="foc()">
</body>
</html>

5
Once, the focus is on the input box, event is fired

6. Onblur Event : The onblur event occurs when an element loses focus i.e. when the user
takes the focus away from a form element or a window.
<html>
<head>
<h2> On Blur Event </h2>
</head>
<body>
<p>Type in the input box and then click on anywhere else,
the Onblur event will be triggered</p>
<input onblur="alert(this.value)">
</body>
</html>

6
7. Onsubmit event: The onsubmit event is triggered only when the user submits a
form on a web page.

<html >
<head>
<h2>On Submit Event</h2>
</head>
<body>
<form onsubmit="alert('Mobile no received, we will revert you');">
<label>Mobile Number</label>
<input type="text" name="mobile-no" required>
<input type="submit" value="Submit">

</form>
</body>
</html>

Assignment

1.What is the use on Onsubmit Event? Explain with Example.

2. Explain with example onblur and onchange events.

You might also like