Learn HTML, Javascript, and C++

Lesson 6

I've already shown you the onClick event handler, now it is time to show you the other event handlers and how they are used.

This event handler only acts when your mouse moves over something, like a link or an image.

onMouseOver

Now let me show you an example:

<A HREf="http://typojester.page.tl" onMouseOver="window.status='Typo Jesters Homepage'; return true"><u>My Homepage</u></A>

The result is below:
Move your mouse on and off the link.

My Homepage

First we create a link tag with A HREF, then we make it equal my homepage URL, so when you click it it will go to my homepage. We add the onMouseOver and use the object hierarchy window.status which is the bottom left bar, we make that equal Typo Jesters Homepage which will now appear in the status bar. Then we make what we want the link to say and underline it so we can see it better. Now if you were to move your mouse over the link it would show Typo Jesters Homepage in the status bar. If you notice the return true, try the link below and compare the two, the top one has return true, bottom one doesnt.

My Homepage

This event handler only acts when your mouse moves over something, like a link or an image.

onMouseOut

Now let me show you an example:

<A HREf="http://typojester.page.tl" onMouseOut="window.status='You moved off the link!'; return true"><u>My Homepage</u></A>

The result is below:

My Homepage

Move on and off the link above, and look at the status window at the bottom left.

This event handler acts whenever the page itself loads, so whenever you enter the page.

onLoad

Now let me show you an example:

The result was the alert you got when you entered the page, if you didnt see it add this site to your trusted list.

This one is easy it just says when the page loads make an alert box saying Welcome to the Lesson. We put it in the body because we are talking about the entire page.

This event handler acts whenever the page itself unloads, so whenever you exit the page.

onUnload

Now let me show you an example:

To see this event handler just exit this page.

It works the same way as the onLoad event, but it does it when you exit the page.

This event handler acts when you click inside a textbox.

onFocus

Now let me show you an example:

Below is the result:

This event handler acts when youve already clicked on the textbox and then click out of it.

onBlur

Now let me show you an example:

Below is the result:

This event handler acts when youre in a textbox and you change something that it says inside it, then click out of the textbox.

onChange

Now let me show you an example:

Below is the result:

This event handler acts when you highlight text inside the textbox.

onSelect

Now let me show you an example:

Below is the result:

This event handler is used with the tag FORM and only works when you use a submit button, which will submit your FORM's information.

onSubmit

Now let me show you an example:

The result is below:

I made it so when you click it, it wont do anything but if it were like the above code, if you clicked the submit button, all the information in anything within the FORM (which would be currently the textbox) would be submitted or sent to the place specified in the tag FORM with the ACTION and METHOD attributes, which just say send it to this place. But the eventhandler i added in the form tag say that when you submit any information it will alert you and say "Form was sent". The onSubmit button is not required for sending information, just for adding something on when it happens.

This next event handler is the onReset, it resets anything within the current form.

onReset

Now let me show you an example:

The result is below:

This button when pushed will reset anything inside the FORM back to its original content, so if you write in the box it will get reset, then reset button needs no attributes except maybe the Value to do this because the reset button has a inborn action, to reset whatever form its in. I also added the onReset inside the FORM so that once its reset, it will alert you, go ahead and try it out.

Phew, a lot of information, if your tired reading just imagine how tired i am of writing. I hope you learned from this Lesson, currently the next lesson is under construction, but stay tuned for more, or check out the other fun stuff on this site.