JavaScript Event Learning Chapter 3 Early Event Handlers_Javascript Skills

These ancient browsers only support one method of registering event handlers, which was invented by Netscape. Because Netscape struck first, if Microsoft wanted to build a browser that supports JavaScript events, it would have to follow Netscape's lead, so there is no compatibility issue here. So this mode will work in any browser that supports JavaScript --- except IE3 on Mac, which does not support events at all.
Register event handler
In the inline event registration model, the event handler is like an attribute of an HTML element, such as:

When a click event occurs on this link, the event handler is triggered and your script is executed: an alert dialog box pops up. You can also trigger a JavaScript function:

The case of the event names in the above two examples is just a matter of habit, HTML It is not case sensitive, so you can write it however you want. XHTML requires that all attribute names must be lowercase, so if you are using XHTML then the name must be written as onclick.
Don’t use it
Although this inline registration model is very old and reliable, it has a shortcoming. He requires you to write JavaScript code inside the XHTML structure layer that does not belong here.
So I strongly recommend you not to use this method. I have a detailed explanation here.
Understanding these old models helps a lot in getting a global feel for JavaScript event handling, but you're better off using the modern models I'll explain below.
Default Action
Back then, Netscape set a default action and there was a way to prevent the default action from running. His model saved the browser wars and standards, and it still works well today.
As we all know, when a user clicks on a link, the browser will load the page according to the href attribute. This is the default action on links. But what happens when you define an onclick event handler? It should be implemented, but when?

If you click on this link, the event handler will be executed first. After all, when the default action occurs - a new page is loaded - the old page including the event handler itself is cleared from 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 be executed first
, and the default action will be executed later
. So in the above example, doSomething() will be executed first, The browser will then open the link.
Blocking default events
After these are determined, most people start to think about how to prevent default events. In our example we can prevent the browser from opening new pages.
So the event handler can return a Boolean value (true or false). The meaning of false is "do not perform the default action". In this way, we can change the example to:

This link will not be executed. After this function is executed, the program returns false, telling the browser not to perform the default action.
Sometimes it is necessary to let the function decide when it should perform and when it should not perform the default action. So we can change the example to:

Copy the code 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, and if the answer is yes then the function returns true, if it has been canceled for so long it returns false. This return value is captured by the event handler and passed to the event itself. If it is flase then the default action will not be executed - the link will not be entered.
However, not all default actions can be blocked. For example, the unload event does not work. Assume the user closes the browser window - the unload event is triggered. If you can prevent the window from closing, will the window remain open against the user's wishes? Of course not.
You can try Microsoft's beforeunload attribute to prevent unloading. Instead of creating a very confusing situation for the user to choose to confirm this action. It's better not to use it.
Returning false to prevent the default action is supported by all browsers. This is the basic component of an event handler. Today's event handler model also adds some new methods to prevent default actions:
W3C added the preventDefalut() method to events. If you reference this method then the default action will be blocked.
Microsoft added the returnValue attribute to the event. If you set its value to false then the default action will also be blocked.
But there is no need for these, simply returning false is enough.
window.status
There is an exception here for returning false. After you set the status bar of the window to change when the mouse passes over a link, and you want to prevent the default action of displaying the link address in the status bar, you should return true:

Copy code The code is as follows:

onMouseOver="window.status = 'This link goes somewhere '; return true">

If you don't do this, the code won't work. No one knows what's going on, it's just 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 fine and you can do a lot of things easily.
Unfortunately, although this is very powerful, it is still difficult to use if you don't know exactly how it works. I've discussed this in detail in another place, but here I'll give an overview in inline mode.
In inline mode you can pass this as a parameter to an event handler function. So you can:

Copy the code The code is as follows:

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

You give The function is passed a reference, which is stored in obj. Now you don't need to traverse the document to find which element was clicked: it's safely stored in the variable obj. Now you can:

Copy the code 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 link The reference is stored in obj. Now you can read the link address of this link and confirm it. You can apply this trick to any link: it will always show the real address of the link you just clicked on.
Continue
If you need to continue learning, please read the next chapter.