Techcss
Javascript_page_menu

JavaScript Events & Methods

Events are generally used to interact the active(currently loaded documents) Browser or navigator window from the user end.

* JavaScript has some in-built event handlers using which we can write functions to perform certain specific actions when selected events occur.


Events

Events are some action performing against some specific occurrences.

JavaScripts Events and their description
Events Description
blur Occurs when a user clicks outside a field
click Occurs when a user clicks on a link or form element
change Occurs when a user changes the value in a form field
focus Occurs when a user clicks inside the field
load Occurs when a page is loaded into navigator
mouseover Occurs when a user moves the pointer over a hyperlink
select Occurs when a user selects a form element's field
submit Occurs when a user clicks on the submit button
unload Occurs when a user leaves a page

Event Handlers

Event handlers are the scripts written by programmer to take advantage of events in JavaScript. The event handlers are executed when the specific event occurs.

The basic format of event handler is

<html_tag Other _Attributes eventHandler = "JavaScript program">

Instead of specifying a seperate function using the event handler can perform check statement as followed example

Example:
<html>
<body>
<form method = 'post'>
	Enter a value greater than 7 :
	<input type = "text" name = "Entry" value = "10" onChange = "if(this.value<7)
		{
		alert('Enter value > 7')
		}" >
</form>

</body>

</html>
The Event handlers aginst some objects
Objects Event Handlers
Selection list OnBlur, onChange, onFocus
Text element onBlur, onChange, onFocus, onSelect
Textarea element onBlur, onChange, onFocus, onSelect
Button element onClick
Checkbox onClick
Radio button onClick
Hypertext link onClick, onMouseOver
Reset button onClick
Submit button onClick
Document onLoad, onUnload
Window onLoad, onUnload
Form onSubmit

Event Methods

We can emulate events using event methods.

To validate the input entry in form elements the event methods cane be used substantially in JavaScript.
The event methods available in JavaScript are:


Using Event Handlers and Event Methods

Event handlers are used as attributes of the form and field tags.

Example:
<html>
<head>
<script>
		function calculate(form)
		{
		 form.square.value = for.entry.value * form.entry.value;
		 form.cube.value = form.entry.value * form.entry.value * form.entry.value;
		}
</script>
</head>

<body onLoad="
				var name = prompt('Enter your name','name');
				alert('Hello...' + name);" >

	<form method = post>
		Enter a number: <input type="text" name="entry" value="0"
							onChange="calculate(this.form);">
<br>
		Square of number entered: <input type="text" name="square" value="0"
							onFocus="this.blur();">
<br>
		Cube of number entered: <input type="text" name="cube" value="0"
							onFocus="this.blur();">
	</form>

</body>
</html>