Scribd
Upload
69 views

Javascript Events

Events in JavaScript represent interactions that can be detected such as user interactions with the browser like clicks or keyboard presses. JavaScript code can listen and react to these events using event handlers. Some common HTML events and their JavaScript event handlers include mouse events like click and mouseover, keyboard events like keydown, form events like submit, and window/document events like load and resize.

Uploaded by

Bhuvnesh Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
69 views

Javascript Events

Events in JavaScript represent interactions that can be detected such as user interactions with the browser like clicks or keyboard presses. JavaScript code can listen and react to these events using event handlers. Some common HTML events and their JavaScript event handlers include mouse events like click and mouseover, keyboard events like keydown, form events like submit, and window/document events like load and resize.

Uploaded by

Bhuvnesh Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Web Technology(KCS-602)

UNIT 3
JAVSCRIPT
TOPIC:JAVASCRIPT EVENTS
• The change in the state of an object is known as an Event. In html, thereJavaScript
are Events
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.For example, when a user clicks over the browser, add
js code, which will execute the task to be performed on the event.

Some of the HTML events and their event handlers are:


Mouse events:
Event Performed Event Handler Description
click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse comes over


the element

mouseout onmouseout When the cursor of the mouse leaves an


element

mousedown onmousedown When the mouse button is pressed over the


element

mouseup onmouseup When the mouse button is released over


the element

mousemove onmousemove When the mouse movement takes place.


Keyboard events:
Event Performed Event Handler Description

Keydown & Keyup onkeydown & onkeyup When the user press and then
release the key
Form events:
Event Performed Event Handler Description

focus onfocus When the user focuses on an


element

submit onsubmit When the user submits the form

blur onblur When the focus is away from a


form element

change onchange When the user modifies or changes


the value of a form element
Window/Document events
Event Performed Event Handler Description

load onload When the browser finishes the


loading of the page

unload onunload When the visitor leaves the current


webpage, the browser unloads it

resize onresize When the visitor resizes the


window of the browser
Click Event

 <html>
 <head> Javascript Events </head>
 <body>
 <script language="Javascript" type="text/Javascript">
 <!--
 function clickevent()
 {
 document.write(“welcome");
 }
 //-->
 </script>
 <form>
 <input type="button" onclick="clickevent()" value="Who's this?"/>
 </form>
 </body>
 </html>
MouseOver Event
 <html>
 <head>
 <h1> Javascript Events </h1>
 </head>
 <body>
 <script language="Javascript" type="text/Javascript">
 <!--
 function mouseoverevent()
 {
 alert("welcome");
 }
 //-->
 </script>
 <p onmouseover="mouseoverevent()"> Keep cursor over me</p>
 </body>
 </html>
Keydown Event

 <html>
 <head> Javascript Events</head>
 <body>
 <h2> Enter something here</h2>
 <input type="text" id="input1" onkeydown="keydownevent()"/>
 <script>
 <!--
 function keydownevent()
 {
 document.getElementById("input1");
 alert("Pressed a key");
 }
 //-->
 </script>
 </body>
 </html>
Load event
 <html>
 <head>Javascript Events</head>
 </br>
 <body onload="window.alert('Page
successfully loaded');">
 <script>
 <!--
 document.write("The page is
loaded successfully");
 //-->
 </script>
 </body>
 </html>
Focus Event
 <html>
 <head> Javascript Events</head>
 <body>
 <h2> Enter something here</h2>
 <input type="text" id="input1"
onfocus="focusevent()"/>
 <script>
 <!--
 function focusevent()
 {

document.getElementById("input1").style.ba
ckground=" aqua";
 }
 //-->
 </script>
 </body>
 </html>
 Test it Now

You might also like