JavaScript Event Handler

In this JavaScript tutorial, you will learn about using event handlers along with events for each HTML tag.

Using Event Handler in JavaScript:

Event Handlers are used in JavaScript by placing the name of the event handler inside the HTML tag associated with object. This is followed by =’JavaScript code’, the code in JavaScript which must execute when the event fires.

The events for each HTML tag are as follows:

<A>

click (onClick)
mouseOver (onMouseOver)
mouseOut (onMouseOut)

<AREA>

mouseOver (onMouseOver)
mouseOut (onMouseOut)

<BODY>

blur (onBlur)
error (onError)
focus (onFocus)
load (onLoad)
unload (onUnload)

<FORM>

submit (onSubmit)
reset (onReset

<FRAME>

blur (onBlur)
focus (onFocus)

<FRAMESET>

blur (onBlur)
error (onError)
focus (onFocus)
load (onLoad)
unload (onUnload)

<IMG>

abort (onAbort)
error (onError)
load (onLoad)

<INPUT TYPE = "button">

click (onClick)

<INPUT TYPE = "checkbox">

click (onClick)

<INPUT TYPE = "reset">

click (onClick)

<INPUT TYPE = "submit">

click (onClick)

<INPUT TYPE = "text">

blur (onBlur)
focus (onFocus)
change (onChange)
select (onSelect)

<SELECT>

blur (onBlur)
focus (onFocus)
change (onChange)

<TEXTAREA>

blur (onBlur)
focus (onFocus)
change (onChange)
select (onSelect)

For example, consider a button placed in a form named PressButton. The following code placed in the click event of the button named PressButton would be written:

<input type="button"
name="PressButton"
value="Press the Button to output value!!!"
onClick="outputvalue();">

In the above example, when the user clicks the button, the onclick event of the button fires and the message assigned to value displays:

Press the Button output value!!!

The block of code written in the function outputvalue() in JavaScript fires or calls.

JavaScript Event Handler

Using Event Handler in JavaScript:

Tags