In the previous lesson, we used an event handler to trigger off a call to our function. There are 18 event handlers that you can use to link your HTML elements to a piece of JavaScript.
When you write a JavaScript function, you will need to determine when it will run. Often, this will be when a user does something like click or hover over something, submit a form, double clicks on something etc.
These are examples of events.
Using JavaScript, you can respond to an event using event handlers. You can attach an event handler to the HTML element for which you want to respond to when a specific event occurs.
For example, you could attach JavaScript's
onMouseover
event handler to a button and specify some JavaScript to run whenever this event occurs against that button.The HTML 4 specification refers to these as intrinsic events and defines 18 as listed below:
Event Handler | Event that it handles |
onBlur | User has left the focus of the object. For example, they clicked away from a text field that was previously selected. |
onChange | User has changed the object, then attempts to leave that field (i.e. clicks elsewhere). |
onClick | User clicked on the object. |
onDblClick | User clicked twice on the object. |
onFocus | User brought the focus to the object (i.e. clicked on it/tabbed to it) |
onKeydown | A key was pressed over an element. |
onKeyup | A key was released over an element. |
onKeypress | A key was pressed over an element then released. |
onLoad | The object has loaded. |
onMousedown | The cursor moved over the object and mouse/pointing device was pressed down. |
onMouseup | The mouse/pointing device was released after being pressed down. |
onMouseover | The cursor moved over the object (i.e. user hovers the mouse over the object). |
onMousemove | The cursor moved while hovering over an object. |
onMouseout | The cursor moved off the object |
onReset | User has reset a form. |
onSelect | User selected some or all of the contents of the object. For example, the user selected some text within a text field. |
onSubmit | User submitted a form. |
onUnload | User left the window (i.e. user closes the browser window). |
I encourage you to bookmark this page as a reference - later on you may need a reminder of which events you can use when solving a particular coding issue.
No comments:
Post a Comment