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:
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:
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?
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:
The event handler will first execute
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:
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:
The Code is as follows:
Function doSomething ()
{
Return confirm ('Do you really want to follow this link? ')
}
This is (very simple) user interaction. The user will be asked a question. If the answer is positive, the function returns true. If the answer is canceled for a long time, the system returns false. The returned value is captured by the event handler and then transferred to the event itself. If it is flase, the default action will not be executed-the link will not enter.
However, not all default actions can be blocked. For example, the unload event will not work. Assume that the unload event is triggered when you close the browser window. If you can stop closing the window, will the window always open against the user's will? Of course not.
You can try Microsoft's beforeunload attribute to block unload. Instead of creating a very messy situation, let users choose to confirm this behavior. It is better not to use it.
Return false to block the default action. All browsers support this action, which is a basic component of the event handler. Today's event handler model also adds some new methods to prevent default actions:
W3C adds the preventDefalut () method to the event. If you reference this method, the default action will be blocked.
Microsoft added the returnValue attribute to the event. If you set its value to false, the default action will also be blocked.
But none of them are needed. Simply returning false is enough.
Window. status
Here, an exception is returned to false. When you change the status bar of the window when setting the mouse over the link, you should return true if you want to prevent the default action-display the link address in the status bar:
The Code is as follows:
OnMouseOver = "window. status = 'this link goes somewhere'; return true">
If you do not, the code will not work. No one knows what is going on. It's a weird thing.
This
In JavaScript, The this keyword usually refers to the function owner. If this points to the HTML element of the event, everything is so beautiful that you can do a lot of things very easily.
Unfortunately, although this is very powerful, it is still difficult to use it if you do not know exactly how it works. I have a detailed discussion about this in another place. Here I will give some overview in inline mode.
In inline mode, you can use this as a parameter of an event handler function. So you can:
The Code is as follows:
Function doSomething (obj)
{
// Obj now refers to the link
}
You passed a reference to the function, which is stored in obj. Now you don't need to search for which element is clicked in the traversal document: it is safe to store in the variable obj. Now you can:
The Code is as follows:
Function doSomething (obj)
{
Var linkTo = obj. href;
Return confirm ('Do you really want to follow the link to '+ linkTo + '? ')
}
The function accepts a reference of a link and stores it in obj. Now you can read and confirm the link address. You can apply this technique to any link: it will always show the real address of the link you just clicked.
Continue
To continue learning, see the next chapter.
