Next page | Contents page |

Handling events

We have already seen a couple of examples of this.

  1. To act upon the user clicking a button (with a mouse). The HTML is as follows.

    
      <input type="button" onclick="doIt()" value=" Do something ">
    

    The onclick attribute invokes a JavaScript function called doIt and we then need script like this:

    
      function doIt ()
      {
        // ... whatever we need to do
      }
    

    The button appears on the page like this:

  2. To ensure that our program is not run until it has been fully loaded into memory we put an onload attribute in the body tag which invokes a function which is the start of our program:

    
      <body onload="run()">
    

There are many other on- attributes and here is a fairly comprehensive (but not exhaustive) list of them, showing also which HTML elements each may be used with.

AttributeUse withComments
onabort<img>Image loading aborted *1
onblur<body>, form elementsWindow or input loses the focus
onchange<input>,<select>,<textarea>User changes input value
onclickmost elementsA complete single click, down and up
ondblclickmost elementsDouble click
onerror<img>Image loading failed *1, *2
onfocus<body>, form elementsWindow or input gains the focus
onkeydown<body>, form elementsKey is pressed to enter a character
onkeypress<body>, form elementsComplete key down and up
onkeyup<body>, form elementsKey is raised after enetring a character
onload<body>,<img>,<iframe>,<object>
onmousedownmost elementsHalf a click: button down but not yet released
onmouseoutmost elementsMouse cursor leaves the element
onmouseovermost elementsMouse cursor comes over the element
onmouseupmost elementsMouse button is released
onreset<form>A special button action *3
onresize<body>The window is resized
onselect<input>, <textarea>Input element is selected
onsubmit<form>A special button action *3
onunload<body>User leaves the page

* Notes

  1. We will cover image loading on a later page.
  2. onerror used to be used in another way but now we have exception handling, as discussed earlier.
  3. The HTML <form> is used for grouping input elements so that a set of data can be sent to a web server when a <submit> button is clicked. Forms may also be <reset>. This would only be relevant if you were going on to make interactive web pages, not covered here.

There is another way to add event handlers to HTML elements, discussed on the next page.

Next page | Contents page |