There are many types of events that JavaScript can handle, but it should be enough to be able to use the following four event handlers at first.

onClick     → “Executes the designated handling when the mouse is clicked at a certain designated area.”

onMouseOver → “Executes the designated handling when the mouse pointer enters the designated area.”

onMouseOut  → “Executes the designated handling when the mouse pointer leaves the designated area.”

onLoad      → “Executes the designated handling when the page is read into the browser.”

If you wish to study the other events, refer to the list of events that can be handled by JavaScript, by clicking here (in Japanese).

Although we have not commented so far, some event handling occurs in HTML, which you know well. Can you guess? The answer is the<a>tag.

Can you remember the excitement when you used this tag for the first time? When you were studying HTML, maybe you thought in the beginning, “How cumbersome to write a tag to create a sentence! You could just select from the menu in a word processor.” But when you learned that the<a>tag that can create (sort of) a button by a simple description, and that pushing the button will give you a jump to a separate page, you felt like you came to a different world, didn’t you? Actually, this is the benefit of event handling.

Suppose, for example, you have a parakeet “Pippi” on your website (html) that you create, and consider this:

  <a href="./pippi.html"> To parakeet page </a>

When we consider how this HTML behaves on the browser, the following will be noted.

• First of all, the text “To parakeet page” is to be displayed in the color expressing the hyperlink. (Normally it will be underlined, too.)
• When the mouse pointer comes to the position displayed “To parakeet page”, the image of the mouse pointer is changed to “finger” image.
• When the area “To parakeet page” is clicked, “file pippi.html in the same folder as this file” designated by href is displayed on the browser.

You should notice that the second and the third items are the event handling.

In the second item, when the event “the mouse pointer enters the designated area” occurs, the handling of “the image of mouse pointer” is changed to “finger image” is executed. This is true with the third item.

This is to say, the tag<a>includes the event handler handling (or managing) both “the mouse stays inside the designated area” and “the mouse is clicked”.

Therefore, the behavior of tag <a> is determined by the mouse operation of the person who sees the page “Clicking the link (button) will cause a jump to a separate page.” You can see that the page stays the same if the link is not clicked.

The fact that tag<a>contains the event handling is the source of completely differentiating its behavior (that it is dynamic) from other tags, and is also the reason why it gives us excitement.

So far we have only used the event handler functions that tag<a>has from the beginning. These alone can give enough excitement to use, but using JavaScript to the same event will enable directing other handlings, or directing other handlings by the other events.

First, look at the following statement.

 <a href="#" onClick="alert('Sorry')"> To parakeet page </a>

Comparing this to the previous sample, we notice two different items.

The first is href="#"

When designating "#"as the attribute value of href , a jump occurs to the top of this page. This is using the function to jump to somewhere within the same page, as in

 <name="anogyo">
    .
    .

 <a href="#anogyo">Jump to “that line </a>

However, the jump to the place that is not defined by 'name' will cause a jump to the top.
The event handling function whereby a jump to the other page is caused when a mouse click event occurs is the inherent function of the<a> tag. Here in this case, since we wish to use only the portion “when the mouse click event occurs”, only href に "#" is designated to href.

Next, we look at “onClick=“alert(‘Sorry’)”.

“onClick” is, as shown at the top of this chapter, one of the event handlers “to execute the handling when the mouse is clicked at the designated area.
The “designated area” above means the area on the browser where the text “To parakeet page” is displayed.
Also, “the designated handling” here means “alert(‘Sorry’)”. In general, this “designated handling” is either the method (function) that JavaScript has, or the method (function) that you defined yourself.。
This time the method “alert()” that JavaScript has is designated. This method displays the characters written in parentheses as the argument, in the window provided for display called dialogue.

As explained above, the event handler directs its behavior by setting the “directed handling” to the object called “event handler” as its value, using a symbol '=' .

Therefore, in the above statement, although it uses tag<a>, clicking on “To parakeet page” will not display the other page, but will display the dialogue where characters “Sorry” are written.
Try to confirm this operation by clicking the following link.

By the way, what will happen if the href="#" portion is replaced by the normal link as follows?

 <a href="http://www.kumamoto-u.ac.jp/"
     onClick="alert('‘Sorry.')"> This time around, to parakeet page </a>

How about this? Guess what will happen.
When you have a guess, click the following link and compare the result with you guess.

Is that what you guessed?

Let’s see what happened.
By the display function of<a>tag and event handler, “This time around, to parakeet page” is displayed, and when this portion is clicked, an attempt is made to jump to the top page Web page of Kumamoto University’s website. However, since the ‘onClick’ event handler has been set up, the event of clicking on “This time around, to parakeet page” is handled by this event handler first, displaying the dialogue “Sorry.” And when this dialogue is closed, the inherent tag <a>handling, “displaying the top page of Kumamoto University” is now executed.

In the previous example, instead of the intrinsic event handling of “jump to link”, a new method of directing the handling to “displaying alert dialogue” was shown.
But in this case, the events available in this method are limited to the “the mouse is clicked in the designated area” type of events that<a> tag inherently has.
Let’s change the supportable events.

For this purpose, we should use a different event handler.

Look at this statement.

 <a href="#" onMouseOver="alert('Sorry.')">Absolutely to parakeet page</a>

This only changed the event handler to 'onMouseOver' . This is the event handler “to execute the designated handling when the mouse pointer enters the designated area”, but in the above example, when the mouse pointer comes to “Absolutely to parakeet page”, a dialogue of ‘Sorry’ will be displayed.

If you actually move the mouse pointer to something below that looks like a link, you can confirm the dialogue.

In this case, you cannot click on the link (looking like).
Because if you attempt to click and move toward the “Absolutely to parakeet page”, the 'onMouseOver' event handler executes the event handling before you click, and you will not reach the click handling.

By the way, all the handling so far where event handler detects the event and executes are the methods that JavaScript has, but you could define some methods (functions) on your own and let them execute as well.

The following is an example.

 <script type="text/javascript">
  <!--
    function myalert() {
      alert('Sorry.');
      alert('I cannot jump to parakeet page');
    }
  //-->
 </script>

 <a href="#" onMouseOver="myalert()">  I know it’s hard, but to parakeet page.  </a>

<script>The inside the script tag is the method created on our own.

  The format to define the method, as we learned before, is as follows.

function method name of your choice(argument 1, argument 2, ...) {
   handling 1;
   handling 2;
     .
     .
 }

• It starts with ‘function’. (“function” also means “functional function” and “mathematical function”.)
• The method name can be one for which JavaScript does not have such ability, and you can assign freely.
• Argument is the input that the defined method will need to have upon its execution. If you don’t need the input, you can omit the argument.
• You can write down as many handling items as necessary. If necessary, branch and repetition handling are written here.

In the above example, the method has been defined with a name ‘myalert’.
There is no argument (input). The actual handling will be only to execute alert() twice.

In the browser, only “I know it’s hard, but to parakeet page.” will be displayed. If you move the mouse pointer to it, ‘onMouseOver’ event handler detects the event and myalert() will be executed.

The operation can be confirmed if you move the mouse pointer to the link below.

Does the operation agree with your expectation?