[Original translation] an in-depth understanding of javascript event processing function binding trilogy (I)-early event processing functions

The original Article is not a trilogy, but a series of articles that explain the basics of javascript. I'm pumping out three of them, as a whole, to understand the event binding model is quite helpful, the original article here http://www.quirksmode.org/js/events_early.html

Today I will explain the earliest method to add event handler functions, which is even in the second-generation browser (Version2 Browers)Also supported

Early browsers supported only one function binding method, which was invented by Netscape. So far, there are no compatibility issues. Due to the leading position of Netscape at that time, if Microsoft wants to create a browser that can run javascript, it must follow the specified standards of Netscape. So this mode works in all javascript browsers-except for IE3 on Mac, it does not support "events" in javascript.

 

Bind event handler

InIn-row event binding model (Inline event registration model,Processing functions are added as an attribute of the html elements of their services, just like

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

When a click event occurs on this hyperlink, the processing function is called and the script is executed: a pop-up box appears. You can also call a javascript function:

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

The combination of upper and lower cases (such as onClick and onMouseOver) in event names is just a habit. HTML is not strictly related to the upper and lower cases, so you can use both cases. However, all attribute names in XHTML must be in lower case. Therefore, if you use XHMTL, you must write it as onclick and onmouseover.

 

Do not use it

Although the in-line event binding model has been very reliable for a long time, it also has a serious defect that it requires javascript scripts to be written into the XHTML structure layer (mixed with html tags ), but it should not be there.

Therefore, I strongly recommend that you do not use this model. Please refer to my article "about the separation of scripts and structural layers", which provides a comprehensive discussion.

 

Default Action)

Shortly after that, Netscape began playing the default behavior of html elements (for example, the default behavior of Hyperlink is to jump to the page), such as how to prevent the default behavior. It should be added that its model survived the browser war and was standardized. So far, it still works well.

As we know, when a user clicks a hyperlink, the browser jumps to the specified page based on its href attribute. This is the default behavior of the hyperlink click event. But what if you bind an onclick handler to the click event of this link at the same time? Will it be executed? When?

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

In the example of clicking a processing function in this hyperlink, the processing function must be executed first. Because the new page is loaded when the default behavior occurs, the old pages in the browser memory and their handler functions will be erased. Therefore, if you want the click handler to be executed, it must be prior to the default action.

This is regarded as an important principle of function binding. If an event causes both default behavior and function execution:

 

1. The processing function is executed first.
2. Default behavior can occur later

 

Therefore, in our previous example, doSomething () will be executed first, and then the browser will jump to the page based on the link.

 

Block default behavior

After the above principles are determined, people begin to consider whether to prevent default behaviors. In the previous example, it is possible to prevent the browser from redirecting to the page based on the link.

Therefore, it is required to determine whether to block the event processing function based on the Boolean value (true or false) returned by the event processing function. When false is returned, it means "no default action will occur". If we change our example:

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

The hyperlink will never work. If the function is executed and a false value is returned, the browser is told not to execute the default action.

Of course, you can also let the function decide whether to execute the default behavior, and change the example:

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

function doSomething()
{
return confirm('Do you really want to follow this link?')
}

This is a very simple user interaction, and the user is asked this question. If the answer is "OK", the function returns true. If "Cancel" is selected, false is returned. The result is captured and returned to the event itself. If the result is false, the default behavior is canceled and the hyperlink does not work.

However, you cannot stopAllDefault behavior occurs. unload cannot be blocked. Imagine that the user is closing the browser window-triggering the unload event on the page in this window. If you can stop this unload event, it means that the window is still open without the user's will? No doors

Of course you can try to block unload by using Microsoft's beforeunload event attribute. However, it may be strange to ask a user if he wants to close the window. So it is best not to use it.

False is returned to prevent the occurrence of default behaviors. It is valid in all browsers and is the most basic part of the event processing function. Modern event processing models and new methods to block default behavior are added:

• W3C adds the preventDefault () method to the event. If you call it, the default action is blocked.
• Microsoft added the returnValue attribute to the event. If it is set to false, the default behavior is blocked.

But you don't need to use them. A simple return fasle is enough.

 

Window. status

Return false has an exception. When you move the mouse over a hyperlink, you also want to change the text of the status bar, which is also a way to prevent the default behavior-to prevent the status bar from displaying the href link address. In this case, true must be returned.

<A HREF="somewhere.html"
         onMouseOver="window.status = 'This link goes somewhere'; return true">

If you do not, the code will not work. No one knows why, just as it is one of many strange things.

 

ThisKeywords

In javascript, The this keyword indicates the function that owns it. In the event processing function, this is a reference to the html element of the event being processed, which is very useful and can be accessed based on this.

Unfortunately, although this keyword is very useful, it is also very difficult to use if you are not very clear about how it works. I have talked about it in another article. Here I will make a brief summary of its use in the in-row model:

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

function doSomething(obj)
{
         // obj now refers to the link
}

You store a hyperlink reference in obj and pass it to the function. Now you do not need to search the entire page for users to click elements: It is securely stored in obj. Now you can do this:

<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 you really want to follow the link to ' + linkTo + '?')

}

This function receives a variable obj, which is a reference to the hyperlink. You can access its href attribute and use it in the confirm dialog box. The trick is to add the handler to any hyperlink on the page: It always correctly prompts the hyperlink being clicked.

 

Continue

Next IntroductionTraditional event binding model (Traditional event registration model)