Scribd
Upload
22 views

CSS (1) - Merged

The document discusses JavaScript event handling. It defines what events are and how JavaScript can react to events in HTML through event handlers. It provides examples of common event handlers like onclick, onmouseover, onmousedown, onmousemove, onload, onfocus and onsubmit.

Uploaded by

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

CSS (1) - Merged

The document discusses JavaScript event handling. It defines what events are and how JavaScript can react to events in HTML through event handlers. It provides examples of common event handlers like onclick, onmouseover, onmousedown, onmousemove, onload, onfocus and onsubmit.

Uploaded by

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

A MICRO PROJECT REPORT

ON

“Event Handling”
SUBMITTED BY

DHOTRE SURAJ TUKARAM

UNDER THE GUIDANCE OF


Prof. Pawar T.S.

In partial fulfillment for the award


Of

DIPLOMA IN COMPUTER ENGINEERING

Sanjivani Pratisthan’s

S. P. I. T. POLYTECHNIC, KURUND

2023 – 2024
Sanjivani Pratisthan’s
S. P. I. T. POLYTECHNIC, KURUND

CERTIFICATE
This is to certify that a micro project work entitled

“Event Handling”
is bonafide work carried out by following students

Name of Student Enrollment Number

DHOTRE SURAJ TUKARAM 2111720029

in partial fulfillment for the award of “Diploma in Computer Engineering” during


the year 2023-24 as required by the Maharashtra State Board of Technical Education,
Mumbai. The micro project report has been approved as it satisfies the academic
requirements in respect of micro project work prescribed by MSBTE, Mumbai.

Place: Kurund, Ahmednagar.


Date: / / 2023

Project Guide Head of Department Principal


(Prof.Pawar T.S.) (Prof. Pawar T. S.) (Prof. Kapse S. D.)
INDEX

Sr.No. Title
01 JAVASCRIPT EVENT

02. INTRODUCTION TO EVENT HANDLING


03. EVENT HANDLERS

04. ONCLICK
05. ONMOUSEOVER & ONMOUSEOUT
06. ONMOUSEDOWN & ONMOUSEUP
07. ONMOUSEMOVE
08. ONLOAD
09. ONFOCUS & ONSUBMIT
JavaScript Events
The change in the state of an object is known as an
Event.
In html, there are various events which represents
that some activity is performed by the user or by
the browser. When javascript code is included in
HTML.
JS react over these events and allow the execution.
This process of reacting over the events is called
Event Handling. Thus, js handles the HTML events
via Event Handlers.
Introduction to Event Handling
• Event Handling is a software routine that processes
actions, such as keystrokes and mouse movements.
• It is the receipt of an event at some event handler from
an event producer and subsequent processes.
Functions of Event Handling
• Event Handling identifies where an event should be
forwarded.
• It makes the forward event.
• It receives the forwarded event.
• It takes some kind of appropriate action in response,
such as writing to a log, sending an error or recovery
routine or sending a message.
• The event handler may ultimately forward the event
to an event consumer.
Event Handler Description
OnClick When mouse click on an element

OnMouser When the cursor of the mouse comes over


the element
OnMouseout When the cursor of the mouse leaves an
element
OnMousedown When the mouse button is pressed over the
element
OnMouseup When the mouse button is released over
the element
OnMousemove When the mouse movement takes places

OnLoad When the browser finishes the loading of


the page
OnFocus When the user focuses on an element

OnSubmit When the user submit the form


On Click Event
<!DOCTYPE html>
<html>
<head>
<title> Example Mouse events</title>
</head>
<body>
<input type="button"
value="changebackground"onclick="cb()">
<script type="text/javascript"> function
cb(){
document.body.style.background="pink"
}
</script>
</body>
</html>
OUTPUT:-
MouseOver and MouseOut
<html>
<head>
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function mouseoverevent()
{
document.body.style.background="yellow"
}
function mouseoutevent()
{
document.body.style.background="green"
}
//-->
</script>
<p onmouseover="mouseoverevent()"
onmouseout="mouseoutevent()"> Keep cursor over me</p>
</body>
</html>
OUTPUT:-
Mouseup and Mousedown
<html>
<head>
<h1> Javascript Events </h1>
<style type="text/css">
.react { width: 100px;
height: 100px;
background-color: cyan;
}
</style>
</head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function down()
{
document.body.style.background="yellow"
}
function up()
{
document.body.style.background="green"
}
//-->
</script>
<div class="react" onmousedown="down()"
onmouseup="up()"></div>
</body>
</html>
OUTPUT:-
MouseMove
<html>
<head>
<title>Mouse Events Demo </title>
</head>
<script language="Javascript"type="text/javascript"> function
move()
{
alert("Mouse Moves");
}
</script>
<body>
<form name="frm1">
<textarea name="ta1" rows="10" cols="10"
onmousemove="move()">
Write here...
</textarea>
</form>
</body>
</html>
OUTPUT:-
OnLoad Event
<html>
<html>
<head>
<script type="text/javascript">
function time()
{
var d = new Date();
var ty = d.getHours()
":"+d.getMinutes()+":"+d.getSeconds();
document.frmty.timetxt.value=ty;
setInterval("time()",1000)
}
</script>
</head>
<body onload="time()">
<center><h2>Displaying Time</h2>
<form name="frmty">
<input type=text name=timetxt size="8">
</form>
</center>
</body>
</html>
OUTPUT:-
OnSubmit & OnFocus
<html>
<body>
<script>
function validateform()
{
var uname=document.myform.name.value;
var upassword=document.myform.password.value;
if (uname==null || uname=="")
{
alert("Name cannot be left blank");
return false;
}
else if(upassword.length<6)
{
alert("Password must be at least 6 characters long.");
return false;
}
}
function emailvalidation()
{
var a=document.myform.email.value
if (a.indexOf("@")==-1)
{
alert("Please enter valid email address")
document.myform.email.focus()
}
}
</script>
<body>
<form name="myform" method="post" action="validpage.html"
onsubmit="return validatefor
Email: <input type="text" size="20" name="email"
onblur="emailvalidation()"><br>
User Name: <input type="text" name="name"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="Submit" >
</form>
</body>
</html>

validpage.html //File name

<html>
<body>
<script type="text/javascript">
alert("You are a Valid User !!!");
</script>
</body>
</html>
OUTPUT:-

You might also like