Scribd
Upload
1K views3 pages

Event Handlers in Javascript

The document discusses different types of event handlers in JavaScript. It defines an event as a function or method containing code that runs in response to user or system interactions. Event handlers allow JavaScript code to execute when certain events, like clicks, mouse movements, or page loads occur. Interactive event handlers include onClick, onMouseOver, and onSubmit, which run when a user interacts with an element. Non-interactive handlers include onLoad and onUnload, which trigger when a page or image loads or unloads without direct user interaction. Examples are provided of how to write code for common event handlers.

Uploaded by

Dinesh Blaze
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
1K views3 pages

Event Handlers in Javascript

The document discusses different types of event handlers in JavaScript. It defines an event as a function or method containing code that runs in response to user or system interactions. Event handlers allow JavaScript code to execute when certain events, like clicks, mouse movements, or page loads occur. Interactive event handlers include onClick, onMouseOver, and onSubmit, which run when a user interacts with an element. Non-interactive handlers include onLoad and onUnload, which trigger when a page or image loads or unloads without direct user interaction. Examples are provided of how to write code for common event handlers.

Uploaded by

Dinesh Blaze
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 3

Event Handling

Event:
A function or method containing program statements that are executed in response to an event.

Event Handler:
An event handler typically is a software routine that processes actions such as keystrokes and mouse movements. With Web sites, event handlers make Web content dynamic. JavaScript is a common method of scripting event handlers for Web content. The events can be classified into two major types as follows Interactive events Non-Interactive events

Interactive events:
Events that are invoked by direct user interaction with the object is called as interactive events. Some of the interactive events are: onClick onMouseOver onMouseOut onReset onSubmit onAbort

onClick Event Handler:


In an onClick event handler, JavaScript function is called when an object in a button (regular, radio, reset and submit) is clicked, a link is pushed, a checkbox is checked or an image map area is selected. Except for the regular button and the area, the onClick event handler can return false to cancel the action. Example code:
<HTML> <TITLE>Example of onClick Event Handler</TITLE> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function valid(form){ var input=0; input=document.myform.data.value; alert("Hello " + input + " ! Welcome..."); } </SCRIPT> </HEAD> <BODY> <H3> Example of onClick Event Handler </H3> Click on the button after inputting your name into the text box:<br>

<form name="myform"> <input type="text" name="data" value="" size=10> <INPUT TYPE="button" VALUE="Click Here" onClick="valid(this.form)"> </form> </BODY> </HTML>

onMouseOver Event Handler:


JavaScript code is called when the mouse is placed over a specific link or an object or area from outside that object or area. For area object the event handler is specified with the <AREA> tag
<HTML> <TITLE>Example of onMouseOver Event Handler</TITLE> <HEAD> </HEAD> <BODY> <H3> Example of onMouseOver Event Handler </H3> Put your mouse over <A HREF="" onMouseOver="window.status='Hello! How are you?' ; return true;"> here</a> and look at the status bar (usually at the bottom of your browser window). </BODY> </HTML>

onMouseOut Event Handler:


JavaScript code is called when the mouse leaves a specific link or an object or area from outside that object or area.
<HTML> <TITLE> Example of onMouseOut Event Handler </TITLE> <HEAD> </HEAD> <BODY> <H3> Example of onMouseOut Event Handler </H3> Put your mouse over <A HREF="" onMouseOut="window.status='You left the link!' ; return true;"> here</a> and then take the mouse pointer away. </BODY> </HTML>

onReset Event Handler:


A onReset event handler executes JavaScript code when the user resets a form by clicking on the reset button.

onSubmit Event Handler:


An onSubmit event handler calls JavaScript code when the form is submitted.

onAbort Event Handler:


An onAbort event handler executes JavaScript code when the user aborts loading an image

Non-Interactive events:
Events that are not invoked by direct user interaction but by indirect actions such as on loading of an image or a page or while leaving a website etc. onLoad onUnload

onLoad Event Handler:


An onLoad event occurs when a window or image finishes loading. For windows, this event handler is specified in the BODY attribute of the window. In an image, the event handler will execute handler text when the image is loaded.
<HTML> <TITLE>Example of onLoad Event Handler</TITLE> <HEAD> <SCRIPT LANGUGE="JavaScript"> function hello(){ alert("Hello there...\nThis is an example of onLoad."); } </SCRIPT> </HEAD> <BODY onLoad="hello()"> <H3>Example of onLoad Event Handler</H3> </BODY> </HTML>

onUnload Event Handler:


An onUnload event handler calls JavaScript code when a document is exited.
<HTML> <TITLE>Example for onUnload Event Handler</TITLE> <HEAD> <SCRIPT LANGUGE="JavaScript"> function goodbye(){ alert("Thanks for Visiting!"); } </SCRIPT> </HEAD> <BODY onUnLoad="goodbye()"> <H3>Example of onUnload event handler</H3> Look what happens when you try to leave this page... </BODY> </HTML>

You might also like