All Snippets
Top 100 Snippets

By Language

GBIC >> Source Code >> JavaScript >> Snippet

25 Event handlers

Event handlers
- are code that is called when an event occurs
- are placed in HTML tag pair just like attributes
- not all tags support all events (see list below)
- can be one or more JavaScript statements, sepearated by semicolons
- long statements can be broken across several lines

Syntax for an event handler is :  
< tag attribute attribute onEventName = "javascript code;" >

- Notice the semicolon
- You can have multiple event handlers inside an HTML tag (one for  each event you wish to respond to)
- code can call other JavaScript functions
- 'this' keyword refers to the object in which the attirbute is contained

Other Examples :

< a href = "#" onClick = "alert('Hello');" > Click </ a >< br >                     //1 event handler in a tag
< a href = "#" onClick = "alert('Hello');" onMouseOver = "alert('Hello');" > Click </ a >< br >    //multiple event handlers in a tag
< a href = "#" onClick = "Update()" > Click </ a >< br >       // redirect to function Update()

document.onClick = "MyFunction()"           // event handlers are properties of that object!

onClick = "location:'my.gif'"                                                         // has browser display this image
onClick = "location:' http://www.vbinformation.com '"             // sends browser to the new URL

< a href = "" onMouseOver = "popupFunc();" >
< input type = "button" value = "Click Me!" onClick = "MyFunction()"
< input type = "button" value = "Click Me!" onClick = "alert('Hi')"
< input type = "button" value = "Click Me!" onClick = "prompt('I need data!')"
< input type = "text" name = "first_text" onFocus = "writeIt('focus'); onBlur=" writeIt( 'blur' ); " onChange=" writeIt( 'change' ); ">

Description of event handlers
onClick       - click on form element or link
onChange       - change value of text, textarea, or select element
onFocus        - form element gets input focus
onBlur         - form element loses input focus
onMouseOver    - mouse over a link or anchor
onMouseOut     - mouse leaves link or anchor
onSelect       - user selects form element 's input field
onSubmit       - submit a form
onResize       - browser window is resized
onLoad         - window loads
onUnload       - window unloads

Events and the Elements That Support Them
abort  img
blur  body, frameset, all form objects (except hidden)
change  input, select, textarea
click  most tags
dblclick most tags
error  img
focus  body, frameset, all form objects (except hidden)
keydown  most tags
keypress most tags
keyup  most tagsg
load  body, frameset
mousedown most tags
mousemove most tags
mouseout most tags
mouseover most tags
mouseup  most tags
reset  form
select  input, textarea
submit  form
unload  body, frameset