Home > Article > Web Front-end > 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: