onChange/onBlur/onFocus
onChange
The onChange event handler reacts to when an element of a form is changed and then the user clicks away from that element.
Suppose we want to pop up an alert if the viewer changes something on a textarea.
First, here is the code to create a regular text area.
<form>
<textarea> </textarea>
</form>
Now, we want an alert to pop up when someone types in something. We want the alert to say "hello"
What we would do, is add the following line inside the textarea tag.
onChange="alert('Hello!')"
You may not understand all about what alert('Hello!') means, but that is ok. I will come to methods, such as alerts, later. The important this is you understand how to use the onChange event handler.
Here is what we just created.
onBlur
The onBlur event handler is almost the same thing as the onChange. onBlur reacts to if a user clicks in a certain element of a form, and then clicks out. You do the same thing as the onChange. Say we want to make an alert saying "Bye" we would add this line inside the textarea tag.
onBlur="alert('thanks for checking in')"
Here is what we just created.
onFocus
The onFocus event handler is exactly the same as the onBlur handler, except it responds to when a viewer clicks inside of an element of a form.
We add the same coding except we change the onBlur to onFocus. We can't use an alert because an alert will pop up. Then you will click ok. Another alert will pop up because the cursor is still inside that element. This will go on forever.
The next page is the onLoad/onUnload event handlers.
Back Homepage Event Handlers Next