We have already seen examples of this, in Part 1 of this course.
To act upon the user clicking a button (with a mouse). The HTML is as follows.
<input type="button" onclick="doIt()" value=" Do something ">
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:
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.
| Attribute | Use with | Comments |
|---|---|---|
| onabort | <img> | Image loading aborted *1 |
| onblur | <body>, form elements | Window or input loses the focus |
| onchange | <input>,<select>,<textarea> | User changes input value |
| onclick | most elements | A complete single click, down and up |
| ondblclick | most elements | Double click |
| onerror | <img> | Image loading failed *1, *2 |
| onfocus | <body>, form elements | Window or input gains the focus |
| onkeydown | <body>, form elements | Key is pressed to enter a character |
| onkeypress | <body>, form elements | Complete key down and up |
| onkeyup | <body>, form elements | Key is raised after enetring a character |
| onload | <body>,<img>,<iframe>,<object> | |
| onmousedown | most elements | Half a click: button down but not yet released |
| onmouseout | most elements | Mouse cursor leaves the element |
| onmouseover | most elements | Mouse cursor comes over the element |
| onmouseup | most elements | Mouse 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
onerror used to be used in another way but now we have exception handling, as discussed earlier.<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.