Next page | Contents page |

Handling events

We have already seen examples of this, in Part 1 of this course.

  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 ">

    Out of date?

    I am well aware that the examples I am showing on this page are deprecated by purists because some JavaScript is being embedded in attributes of HTML elements. It is considered better these days to keep HTML and JavaScript completely separate by using addEventListener () functions*. However I think the examples here are easier to follow and they do work. I still use this way of writing. For more information, when you are ready for it, Mozilla's JavaScript reference site has a good page introducing events.

    * I do cover addEventListener () in the next pages. Keep reading.

    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
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, communicating with a web server, not covered here.

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

Next page | Contents page |