JavaScript Event Learning Chapter III early incident handler _javascript tips

These ancient browsers only support a method of registering event handlers, a method that was invented by Netscape. Because Netscape is preemptive, if Microsoft wants to be a browser that supports JavaScript events, it has to follow Netscape, so there is no compatibility issue. So this pattern works in any JavaScript-enabled browser---except for the IE3 on Mac, he doesn't support events at all.
Registering an event handler
In an inline event registration model, an event handler is like an attribute of an HTML element, such as:
<a href= "somewhere.html" onclick= "alert (' I\ ' ve been clicked! ')" >
When a Click event occurs on this link, the event handler is triggered and executed in your script: a warning dialog box pops up. You can also trigger a JavaScript function:
<a href= "somewhere.html" onclick= "dosomething ()" >
Above two examples the case of the name of the case is just a matter of habit, HTML is case insensitive, so you can write whatever you want. XHTML requires that all attribute names must be lowercase, so if you use XHTML then the name will be written as onclick.
Don't use him.
Although this type of inline registration model is very old and reliable, he has one problem. He asks you to write JavaScript code that does not belong here in the XHTML structure layer.
So I strongly advise you not to use this method. I have a detailed explanation here.
Understanding these old models is a great help to the overall sense of JavaScript event handling, but you'd better use the modern pattern that I explained later.
Default action
When Netscape set the default action, it also prevented the default action from running. His model saved the browser wars and standard-setting, and is now running well.
As we all know, when a user clicks on a linked browser, the page is loaded according to the attributes of href. This is the default action on the link. But what happens when you define an onclick event handler? Should be able to be executed, but when?
<a href= "somewhere.html" onclick= "dosomething ()" >
If you click on this link, the event handler must be executed first. After all, when the default action occurs-the new page loads-the old page, including the event handler itself, is erased from memory. If the OnClick event handler executes, 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 first executes the
, the default action is then executed
So in the example above, DoSomething () executes first, and then the browser opens the link.
Block Default Events
When these are all identified, most of us begin to consider how to block the default event. In our example, you can prevent the browser from opening a new page.
So the event handler can return a Boolean value (Ture or False), and false means "do not default action." So we can change the example to:
<a href= "somewhere.html" onclick= "dosomething" (); return False ' >
This link will not be followed by execution. After this function executes, the program returns false, telling the browser not to perform the default action.
Sometimes it is necessary to let the function decide when to execute and when not to perform the default action. So we can change the example to:

Copy Code code as follows:

<a href= "somewhere.html" onclick= "return DoSomething ()" >
function dosomething ()
{
return confirm (' Do your really want to follow this link? ')
}

This is the (very simple) user interaction. The user is asked a question, and if the answer is yes then the function returns True, and returns a false if it has been canceled for so long. The return value is captured by the event handler and then transferred to the event itself. If it is flase then the default action will not be executed-the link will not enter.
However, not all default actions can be blocked. For example, the Unload incident is not possible. Suppose the user closes the browser window--triggers the Unload event. If you can stop the window from closing, will the window open up against the user's will? Of course not.
You can try Microsoft's Beforeunload properties to stop unload. Rather than create a very confusing situation for the user to choose to confirm this behavior. It's better not to.
Returns false to prevent the default action from being supported by all browsers this is the basic composition of the event handler. Today's event handler model also adds new methods to block the default actions:
The Preventdefalut () method is added to the event. If you refer to this method, the default action is blocked.
Microsoft has added the ReturnValue attribute to the event. If you set his value to False then the default action will also be blocked.
But if you don't need these, simply return false is enough.
Window.status
There is an exception here for return false. When you change the window's status bar when you set the mouse over the link, you want to block the default action--When the status bar shows the link address--You should return true:

Copy Code code as follows:

<a href= "somewhere.html"
onmouseover= "window.status = ' this link goes somewhere '; return True ' >

If you do not, then the code will not work. No one knows what's going on, it's a weird thing.
This
In JavaScript the This keyword usually refers to the owner of the function. If this points to the HTML element where the event occurred, then everything is so beautiful that you can do a lot of things simply.
Unfortunately, although this is very powerful, it's still difficult to use if you don't know exactly how he works. I have a detailed discussion of this in another place where I do some overviews in inline mode.
In inline mode you can use this as an argument to an event handler function. So you can:

Copy Code code as follows:

<a href= "somewhere.html" onclick= "dosomething (This)" >
function dosomething (obj)
{
Obj now refers to the link
}

You pass a reference to the function, which is stored in obj. Now you don't need to traverse the document to find which element is clicked: He is securely stored in the variable obj. Now you can:

Copy Code code as follows:

<a href= "somewhere.html" onclick= "return dosomething (This)" >
<a href= "somewhereelse.html" onclick= "return dosomething (This)" >
function dosomething (obj)
{
var linkto = Obj.href;
return confirm (' Do your really want to follow "link to ' + linkto + '? ')
}

The function receives a reference to a link stored in obj. Now you can read this link to the link address and then confirm. You can use this technique on any link: He always shows the real address of the link you just clicked on.
Go on
If you need to continue to study, please see the next chapter.