JavaScript Event Learning Chapter 3: early Event handlers

Source: Internet
Author: User

In this chapter, I will talk about some of the oldest ways to add event handlers, which are even supported by the second-generation browsers.

These old browsers only support one method for registering an event handler, which was invented by Netscape. Because Netscape takes the lead, if Microsoft wants a browser that supports JavaScript events, it should follow Netscape, so there is no compatibility problem here. Therefore, this mode can be run in any browser that supports JavaScript-except for IE3 on Mac, it does not support events at all.

Register an event handler
In the Internal event registration model, the event handler is like an attribute of an HTML element, for example:

<A href = "somewhere.html" onClick = "alert ('I \ 've been clicked! ') ">

When a click event occurs on this link, the event handler is triggered and then runs your script: a warning dialog box is displayed. You can also trigger a JavaScript function:

<A href = "somewhere.html" onClick = "doSomething ()">

In the above two examples, the Case sensitivity of event names is just a habit. HTML is case insensitive, so you can write everything you want. XHTML requires that all attribute names must be in lower case. Therefore, if you use XHTML, the names must be written as onclick.

Don't use him
Although this inline registration model is very old and reliable, it has a disadvantage. He asked you to write JavaScript code that is not here in the XHTML structure layer.

Therefore, I strongly recommend that you do not use this method. Here I have a detailed explanation.

Understanding these old models is helpful for processing JavaScript events globally, but you 'd better use the modern mode I will describe later.

Default action
In the past, Netscape set the default action to prevent the default action from running. His pattern saves the Battle of browsers and standards, and is now running well.

As we all know, when a user clicks a link, the browser loads the page according to the href attribute. This is the default action on the link. But what will happen after you define an onclick event handler? It should be executed, but when?

<A href = "somewhere.html" onClick = "doSomething ()">

If you click on this link, the event handler will be executed first. After all, when the default action occurs-new page loading-the old page, including the event handler itself, will be cleared from the memory. If the onclick event handler is executed, it must be before the default action.

This has a very important principle. If an event triggers both the default action and the event handler, then:
1. The event handler will first execute
2. The default action is then executed.
In the preceding example, doSomething () is executed first, and then the browser opens the link.

Block default events
When these are all determined, most people begin to consider how to block default events. In our example, we can prevent the browser from opening a new page.

Therefore, the event handler can return a Boolean value (true or false). false means "do not perform the default action ". In this way, we can change the example:

<A href = "somewhere.html" onClick = "doSomething (); return false">

This link will not be followed. After this function is executed, the program returns false, telling the browser not to perform the default action.

Sometimes it is necessary for a function to decide when to execute the default action. So we can change the example:

<A href = "somewhere.html" onClick = "return doSomething ()">
Function doSomething ()
{
Return confirm ('Do you really want to follow this link? ')
}

  • 2 pages in total:
  • Previous Page
  • 1
  • 2
  • Next Page

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.