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 requires

Strong adaptability. 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 it the last time for the countless

Pages that use the Netscape event processing model make concessions on compatibility.

These two browsers actually support the following code:

1 element. onclick = dosomething;

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 cross-browsing registration event.

It is also very 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

The advanced mode is introduced, but the traditional mode still works 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.

1 <a href = "somewhere.html" onclick = "dosomething ()">

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 set in the page source code

Set element parameters to register. 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:
1 element. onclick = dosomething;

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 name must be

All are in lower case.

To delete this event handler, simply leave the Click Event empty:
1 element. onclick = NULL;

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:
1 element. onclick ()

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 is rarely used to execute events.

Processing Method.

Microsoft's ie5.5 and later IE also have a fireevent () method to accomplish the same thing. Use:
1 element. fireevent ('onclick ')

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

1 element. onclick = dosomething ();

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. Other functions

It is written to execute an event. Otherwise, it may cause serious confusion and errors.

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 will discuss this in detail in another place.

In the traditional mode, I will give an overview.

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. The difference will be discussed later.

.

1 element. onclick = dosomething;

2 another_element.onclick = dosomething;

3

4 function dosomething (){

5 This. style. backgroundcolor = '# cc0000 ';

6}

If you have registered dosomething () as a click event for any HTML element, the element gets a background when you click that element.

Anonymous Functions)
Suppose you want to change the background color when all the divs move by the mouse, and then return the background color when the mouse leaves. To use this correctly, you can write as follows:

01 var x = Document. getelementsbytagname ('div ');

02 for (VAR I = 0; I <X. length; I ++ ){

03 x [I]. onmouseover = over;

04 x [I]. onmouseout = out;

05}

06

07 function over (){

08 this. style. backgroundcolor = '# cc0000'

09}

10

11 function out (){

12 This. style. backgroundcolor = '# ffff'

13}

These codes can be run. No problem. However, since both over () and out () are relatively simple, you can use a more elegant anonymous Function Method to write:
1...

2 For (VAR I = 0; I <X. length; I ++ ){

3 x [I]. onmouseover = function () {This. style. backgroundcolor = '# cc0000 '}

4 x [I]. onmouseout = function () {This. style. backgroundcolor = '# ffff '}

5}

Both onmouseover and onmouseout get a function. Instead of copying over () and out (), it is better to directly define an event handler on the event registration script. Since

These functions have no names, so they are anonymous functions.

The two methods for registering event handlers are basically the same. The only difference is that the second method has less code. I like Anonymous functions very much and I will register a simple event

Program.

Problem
One small problem is that in traditional mode, The onclick attribute can only contain one function. When you want to register multiple event handlers for an event, the problem arises.

For example, you have written a module that can be dragged. This module is registered on the onclick event handler, so you can click it to start dragging. You have also written a module.

Track user clicks and send messages to the server during onUnload so that you can know how your page is used. This module also needs to register an onclick event on the element.

.

So it may be like this:

1 element. onclick = startdragdrop;

2 element. onclick = spyonuser;

This will cause an error. The second registration program will overwrite the first one. When a user clicks an element, only spyonuser () is executed.

The solution is to register a method that contains two methods:
1 element. onclick = function () {startdragdrop (); spyonuser ()}

Flexible Registration
However, assume that you do not use two modules on every page of your website. If you still write:

1 element. onclick = function () {startdragdrop (); spyonuser ()}

You will get an error message because one of the functions is undefined. Therefore, be especially careful when registering events. When startdragdrop () is registered

To register spyonuser (), we can write as follows:
1 var old = (element. onclick )? Element. onclick: function (){};

2 element. onclick = function () {old (); spyonuser ()};

First, you define a variable old. If the element already has an onclick event handler, store it into old. If not, set old to an empty function.

Now you need to register a new event handler for a div. Then the program will first execute old () and then execute spyonuser (). Now the new event handler is added to the element.

, The previously registered (if any) is also included.

Last question: what if you want to remove one of the event handlers? I am not sure yet. You need to edit element. onclick () in some ways. I have not studied

This problem.

Other Modes
We can see that the traditional mode is very simple and easy to use, but the solution is ugly when you add several programs to an event. The W3C event handler can solve this problem well.

Problems.

Continue
If you want to continue learning, please refer to the next chapter.