20bce2851 N.babi Da-2

INTERNET AND WEB PROGRAMMING THEORY
ASSIGNMENT-2
Name: N.BABI
Reg No.: 20BCE2851
Slot: C2
Faculty: Arivoli A
Event Handler
Event handlers can be used to handle and verify user input, user actions, and
browser actions: Things that should be done every time a page loads. Things
that should be done when the page is closed. Action that should be performed
when a user clicks a button.
1. OnLoad – Occurs when the object has been loaded. Onload is most often
used within the <body> element to execute a script once a web page has
completely loaded all content (including images, script files, CSS files, etc.).
The onload event can be used to check the visitor's browser type and browser
version, and load the proper version of the web page based on the
information.
Code:
<html>
<head>
<script language= "JavaScript" type="text/javascript"> function mymessage()
{
alert("This message was triggered from the onload event"); }
</script>
</head>
<body onload="mymessage()">
</body>
</html>
Output:
2. OnUnload
User navigates away from the page. The onunload event occurs once a page
has unloaded (or the browser window has been closed). Note: The onunload
event is also triggered when a user reloads the page (and the onload event).
Code:
<html>
<head>
<script type="text/javascript">
function mymessage()
{
alert("This message was triggered from the onunload event"); }
</script>
</head>
<body onunload="mymessage()">
<p>An alert box will display a message when you close this document!</p>
</body>
</html>
Output:
3. OnChange:
The onchange property of an Input object specifies an eventhandler function
that is invoked when the user changes the value displayed by a form element.
Code:
<HTML>
<TITLE>Example of onChange Event Handler</TITLE>
<HEAD>
<SCRIPT
LANGUAGE="JavaScript">
function valid() {
var input = 0;
input = document.myform.data.value;
alert("You have changed the value from 10 to " + input);
}
</SCRIPT>
</HEAD>
<BODY>
<H3>Example of onChange Event Handler</H3>
Try changing the value from 10 to something else:<br>
<form name="myform">
<input type="text" name="data" value="10" size=10 onChange="valid( )">
</form>
</BODY>
</HTML>
Output:
4. OnSubmit
The onsubmit event occurs when a form is submitted.
Code:
<html>
<head>
function confirmInput()
{ fname=document.forms[0].fname.value; alert("Hello " + fname + "! You will
now be redirected to some other page");
}
</script>
</head>
<body>
<form onsubmit="confirmInput()" action="http://www.kcetvnr.org">
Enter your name: <input id="fname" type="text" size="20">
<input type="submit">
</form>
</body>
</html>
Output:
5. Onblur:
The onblur event occurs when an object loses focus. The onblur event is
most often used with form validation code (e.g. when the user leaves a form
field).
Code:
<html>
<head>
function message()
{ alert("This alert box was triggered by the onblur event
handler");
}
</script>
</head>
<body>
<p>The onblur event occurs when an element loses focus. Try to click or write
in the input field below, then click elsewhere in the document so the input
field loses focus.</p>
<form>
Enter your name: <input type="text" onblur="message()" size="20">
</form>
</body>
</html>
6. OnFocus:
The onfocus event handler is frequently used with text boxes as well as
select drop-down lists in order to highlight every option that a user is
presently scrolling over to display.
Code:
<html>
<head>
function message()
{ alert("This alert box was triggered by the onfocus event
handler");
}
</script>
</head>
<body>
<form>
Enter your name: <input type="text" onfocus="message()" size="20">
</form>
</body>
</html>
Output:
7. OnMouseover and OnMouseOut: The onmouseover event occurs when the

mouse pointer is moved onto an element, or onto one of its children. The
onmouseout event occurs when the mouse pointer is moved out of an
element, or out of one of its children.
Code:
<html>
<body>
<h1 onmouseover="style.color='red'" onmouseout="style.color='green'">

Mouse over this text</h1>
</body>
</html>
8. onmousemove: The onmousemove event occurs when the pointer is
moving while it is over an element.
Code:
<html>
<head>
var i=1; function moveright()
{
document.getElementById('header').style.position="relative";
document.getElementById('header').style.left=i; i++;
}
</script>
</head>
<body onmousemove="moveright()">
<h1 id="header">
Move the mouse over this page
</h1>
</body>
</html>
Output:
9. onclick: The onclick event occurs when the user clicks on an element.
Code:
<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>

<h2>The onclick Event</h2>
<p>Field1: <input type="text" id="field1" value="Hello World!"></p>

<p>Field2: <input type="text" id="field2"></p>
<p>Clicking "Copy" triggers a function that copies the text value from Field1
to Field2.</p>
<button onclick="myFunction()">Copy</button>
<script> function myFunction() {

document.getElementById("field2").value =
document.getElementById("field1").value; }
</script>
</body>
</html>
10. onkeydown: The onkeydown event occurs when the user is pressing a key
(on the keyboard).
Code:
<!DOCTYPE html>
<html>
<body>
<p>This example uses the HTML DOM to assign an "onkeydown" event to an input
element.</p>
<p>Press a key inside the text field to set a red background color.</p>
<input type="text" id="demo">
<script> document.getElementById("demo").onkeydown = function()

{myFunction()};
function myFunction() {
document.getElementById("demo").style.backgroundColor = "red";
}
</script>
</body>
</html>
Output:
11. Onkeypress: The onkeypress event occurs when the user presses a key (on
the keyboard).
Code:
<!DOCTYPE html>
<html>
<body>
<p>This example uses the HTML DOM to assign an "onkeypress" event to an input
element.</p>
<p>Press a key inside the text field to set a red background color.</p>
<input type="text" id="demo">
<script> document.getElementById("demo").onkeypress = function()

{myFunction()};
document.getElementById("demo").style.backgroundColor = "red";
}
</script>
</body>
</html>
12. Onresize: The onresize event occurs when the browser window has been
resized.
Code:
<!DOCTYPE html>
<html>
<body>
<p>This example uses the HTML DOM to assign an "onresize" event to the body
element.</p>
<p>Try to resize the browser window.</p>
<p>Window resized <span id="demo">0</span> times.</p>
<script>
document.getElementsByTagName("BODY")[0].onresize = function() {myFunction()};
var x =
0;
function myFunction() { var txt = x += 1;
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Output:
13. Ondrag: The ondrag event occurs when an element or text selection is being
dragged.
Code:
<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
float: left; width:
100px; height: 35px;
margin: 15px; padding:
10px; border: 1px solid
#aaaaaa;
}
</style>
</head>
<body>
<p>This example uses the HTML DOM to assign "ondragstart", "ondrag",

"ondragover" and "ondrop" events to the document object.</p>
<p>Drag the p element back and forth between the two rectangles:</p>
<div class="droptarget">
<p id="dragtarget" draggable="true">Drag me!</p>
</div>
<div class="droptarget"></div>
<p style="clear:both;"><strong>Note:</strong> drag events are not supported in

Internet Explorer 8 and earlier versions or Safari 5.1 and earlier
versions.</p>
<p id="demo"></p>
<script>
/* Events fired on the drag target */
document.ondragstart = function(event) {
event.dataTransfer.setData("Text", event.target.id);
};
document.ondrag = function(event) {
document.getElementById("demo").innerHTML = "The p element is being dragged";
};
/* Events fired on the drop target */

document.ondragover = function(event) {
event.preventDefault();
}; document.ondrop = function(event) {
event.preventDefault(); if (
event.target.className == "droptarget" ) {
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = "The p element was dropped";
}
};
</script>
</body>
</html>
Output:
14. Oninput: The oninput event occurs when an element gets user input. This
event occurs when the value of an <input> or <textarea> element is changed.
Code:
<!DOCTYPE html>
<html>
<body>
<p>This example uses the HTML DOM to assign an "oninput" event to an input
element.</p>
<p>Write something in the text field to trigger a function.</p>

Enter name: <input type="text" id="myInput" value="Mickey">
<script> document.getElementById("myInput").oninput = function()
{myFunction()};
function myFunction() { alert("The value of the
input field was changed.");
}
</script>
</body>
</html>
Output:
15. Onscroll: The onscroll event occurs when an element's scrollbar is being
scrolled.
Code:
<!DOCTYPE html>
<html>
<head> <style> div {
border: 1px solid black;
width: 200px; height:
100px; overflow:
scroll;
}
</style>
</head>
<body>
<p>This example uses the HTML DOM to assign an "onscroll" event to a div
element.</p>
<p>Try the scrollbar in the div</p>

<div id="myDIV">In my younger and more vulnerable years my father gave me some
advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that
all the people in this world haven't had the advantages that you've
had.'</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").onscroll = function() {myFunction()};
document.getElementById("demo").innerHTML = "You scrolled in div.";
}
</script>
</body>
</html>
Output:
16. Onselect: The onselect event occurs after some text has been selected in an
element.
Code:
<!DOCTYPE html>
<html>
<body>
<p>This example uses the HTML DOM to assign an "onselect" event to an input
element.</p>
Select some text: <input type="text" value="Hello world!" id="myText">

<p id="demo"></p>
<script> document.getElementById("myText").onselect = function()

{myFunction()};
function myFunction() { document.getElementById("demo").innerHTML =

"You selected some text!";
}
</script>
</body>
</html>
Output:
17. Onstorage: The storage event occurs when there is a change in the
window's change area.
Code:
<!DOCTYPE html>
<html>
<body>
<h1>The Storage Event</h1>
<p>The Storage event is triggered when there is a change in the window's

storage area.</p>
<p><strong>Note:</strong> The storage event is only triggered when a window

<strong>other than itself</strong> makes the changes.</p>
<p>Therefore, in this example, a new window is created, and the changes is
done in the new window.</p>
<button onclick="changeValue()">Change a Storage Item</button>

<p id="demo"></p>
<script> window.addEventListener("storage",
myFunction);
function myFunction(event) {
document.getElementById("demo").innerHTML = "A change was made in the
storage area";
} function changeValue() { var x = window.open("",
"myWindow", "width=200,height=100");
x.localStorage.setItem("mytime", Date.now());
x.close(); }
</script>
</body>
</html>
Output:
18. Onerror: The onerror event is triggered if an error occurs while loading an
external file (e.g. a document or an image).
Code:
<!DOCTYPE html>
<html>
<body>
<img src="image.gif" onerror="myFunction()">
<p>A function is triggered if an error occurs when loading the image. The
function shows an alert box with a text.
In this example we refer to an image that does not exist, therefore the
onerror event occurs.</p>
<script> function myFunction() { alert('The image could not be loaded.');
}
</script>
</body>
</html>
Output:
19. Onhashchange: The onhashchange event occurs when there has been
changes to the anchor part (begins with a '#' symbol) of the current URL.
Code:
<!DOCTYPE html>
<html>
<body onhashchange="myFunction()">
<p>Click the button to change the anchor part of the current URL to #part5</p>
<button onclick="changePart()">Try it</button>
<p id="demo"></p>
<script>
// Using the location.hash property to change the anchor part function
changePart() { location.hash = "part5"; var x = location.hash;
document.getElementById("demo").innerHTML = "The anchor part is now: " + x;
}
// Alert some text if there has been changes to the anchor

part function myFunction() { alert("The anchor part has
changed!"); }
</script>
</body>
</html>
Output:
20. Oncontextmenu: The oncontextmenu event occurs when the user

rightclicks on an element to open the context menu.
Code:
<!DOCTYPE html>
<html>
<head> <style> div {
background: yellow;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div oncontextmenu="myFunction()" contextmenu="mymenu"> <p>Right-

click inside this box to see the context menu!
<menu type="context" id="mymenu">

<menuitem label="Refresh" onclick="window.location.reload();"
icon="ico_reload.png"></menuitem>
<menu label="Share on...">
<menuitem label="Twitter" icon="ico_twitter.png"
onclick="window.open('//twitter.com/intent/tweet?text=' +
window.location.href);"></menuitem>
<menuitem label="Facebook" icon="ico_facebook.png"
onclick="window.open('//facebook.com/sharer/sharer.php?u='
+ window.location.href);"></menuitem> </menu>
<menuitem label="Email This Page"
onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>
</div>
<script>
function myFunction() { alert("You right-
clicked inside the div!");
}
</script>
</body>
</html>
Output:

20bce2851 N.babi Da-2

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

20bce2851 N.babi Da-2

Uploaded by

Copyright:

Available Formats

INTERNET AND WEB PROGRAMMING THEORY

7. OnMouseover and OnMouseOut: The onmouseover event occurs when the

<h1 onmouseover="style.color='red'" onmouseout="style.color='green'">

<h1>HTML DOM Events</h1>

<p>Field1: <input type="text" id="field1" value="Hello World!"></p>

<script> function myFunction() {

<script> document.getElementById("demo").onkeydown = function()

<script> document.getElementById("demo").onkeypress = function()

<p>Try to resize the browser window.</p>

<p>Window resized <span id="demo">0</span> times.</p>

<p>This example uses the HTML DOM to assign "ondragstart", "ondrag",

<p style="clear:both;"><strong>Note:</strong> drag events are not supported in

/* Events fired on the drop target */

<p>Write something in the text field to trigger a function.</p>

<p>Try the scrollbar in the div</p>

Select some text: <input type="text" value="Hello world!" id="myText">

<script> document.getElementById("myText").onselect = function()

function myFunction() { document.getElementById("demo").innerHTML =

<h1>The Storage Event</h1>

<p>The Storage event is triggered when there is a change in the window's

<p><strong>Note:</strong> The storage event is only triggered when a window

<button onclick="changeValue()">Change a Storage Item</button>

<img src="image.gif" onerror="myFunction()">

// Alert some text if there has been changes to the anchor

20. Oncontextmenu: The oncontextmenu event occurs when the user

<div oncontextmenu="myFunction()" contextmenu="mymenu"> <p>Right-

<menu type="context" id="mymenu">

You might also like