JavaScript Event Learning Chapter 4: traditional Event registration Model

In this chapter, I will explain the best way to register events for elements, that is, to ensure that a specific event occurs on a specific HTML element and can run a specific script.

Registering events in the oldest JavaScript browser can only pass the inline mode. Since DHTML fundamentally changes the method of page operations, event registration must be scalable and adaptable. Therefore, a corresponding event model is required. Netscape started in the third-generation browser, and IE started in the fourth-generation browser.

Because Netscape 3 began to support this new event registration model, which was a de facto standard before the browser war. So Microsoft had to make the last concession on compatibility for the countless pages on the Internet that used the Netscape event processing model.

These two browsers actually support the following code:

Element. onclick = doSomething; <BR>

This is the best way to register an event. No matter when the user clicks this HTML element, doSomething () will be executed. This is the only best way to register events that can be viewed across pages. It is also important to have a deep understanding of this model and its limitations.

Because there is no official standard, I am now referred to as the traditional event registration model (traditional event registration model ). At the same time, w3c has standardized event registration, and Microsoft has also released an advanced mode, but the traditional mode can still run well.

Advanced event registration program
Beginning with Netscape 3/IE 4, JavaScript can recognize the attributes of a series of events on elements. Most HTML elements have attributes such as onclick, onmouseover, and onkeypress. The attributes of those elements-the events supported by those elements-depend on the browser.

These attributes are nothing new to them. It already exists in the oldest JavaScript browser.

<A href = "somewhere.html" onclick = "doSomething ()"> <BR>

Here, the tag has an onclick parameter, which becomes an attribute of element A in JavaScript. The event handlers of old browsers can only be registered by setting element parameters in the source code of the page. If you want to run this script on all the tags, you need to add the onclick event to all the links.

With the arrival of the traditional event registration model, The onclick, onmouseover, or other event processing of HTML elements can all be registered through JavaScript. Now you can add, modify, or delete some event handlers without having to touch the HTML. When you access HTML elements through DOM, you can write code like the following:

Element. onclick = doSomething; <BR>

Now our example function doSomething () is registered on the onclick attribute of the element, and will be executed when the user clicks this element function. Note that the event names must be in lower case.

To delete this event handler, simply leave the Click Event empty:

Element. onclick = null; <BR>

The event handler is the same as a common JavaScript function. It can be executed even if the event does not occur. If you write it like this:

Element. onclick () <BR>

Then doSomething will be executed. Although it is a function that does not know what to do or produces an error, there is no real event. Therefore, this method is rarely used to execute event handlers.

Microsoft's IE5.5 and later IE also have a fireEvent () method to accomplish the same thing. Use:

Element. fireEvent ('onclick') <BR>

No brackets
Note that you cannot use parentheses when registering an event handler. The onclick method is set to another function. If you write

Element. onclick = doSomething (); <BR>

Then this function will be executed and its results will be registered on onclick. This is not what we expected. We just hope that the function can be executed when an event occurs. In addition, the function is written to execute an event. Otherwise, serious confusion and errors may occur.

So we copy the entire doSomething () method in the event handler. We just want to execute this function when the event is executed.

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 the traditional mode.

In the traditional mode, this works as follows. Note that this is slightly different from the inline mode. Now the this keyword is in the function, not in the HTML parameter. This difference will be discussed later.

Element. onclick = doSomething; <BR> another_element.onclick = doSomething; <BR> function doSomething () {<BR> this. style. backgroundColor = '# cc0000'; <BR >}< BR>

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page