home > javascript > events and actions

javascript events and actions

what is?

an event?
simply put: something that you do with your mouse: clicking, dragging, hovering over something. in director an event is called a handler.

an action?
a piece of computer code that gets executed when an event occurs. in html this normally is the computer language called javascript, in director it is lingo.

events trigger actions
events: the mouse clicks on a link
action: the the browser goes to the next page

or, in computer language:
event: onClick
action: window.location='somepage.htm'

every action can trigger any event. you decide what happens when.
events can only occur on links, or on form and .

you can have a lot of fun with javascript. most of the time you use it for form checks. example: did someone fill in an email adres? if not: give an alert message and don't send the form.
   
events:

events that exist in html (html is not case sensitive):

category event releted event  
on buttons or links:   onClick onDblClick  
  onMouseDown onMouseUp  
  onMouseOver onMouseOut  
       
on form-items: onBlur
 onFocus  
  onSelect    
  onChange    
       
on the whole page: onKeyDown onKeyUp very rarely used
  onKeyPress   very rarely used
   
actions:

some javascript actions you can try (javascript is case sensitive!):

action purpose
alert('Welcome to the website') show an alert-window with OK button
body.bgColor='#ff0000' immediately change the color of the page background
window.open('somepage.htm') open somepage.htm in a new window
window.location='http://www.disney.com/' open the disney website in the same window
window.status='Roll over me'; return true put the text "Roll over me" on the status bar
   
html

now, how does that look in html?
<a href="somepage.htm" onmouseover="window.status='Roll over me'; return true">
where:

tag/attribute function
a tag
href attribute:
href
somepage.htm value of attribute:
link to another page
onmouseover attribute:
event: "onmouseover"
window.status='Roll over me'; return true value of attribute:
action: execute the javascript command

some attributes are an event (here: onmouseover), some attributes are not (here: href).
however, you can always recognize an event by its keyword: its starts with "on...", and an event is always followed by an action (=javascript command), so:
<tag attribute="value">
<tag attribute="value" onevent="action">