JavaScript Event Learning Chapter 4 Traditional Event Registration Model_javascript skills

Registering events in the oldest JavaScript browsers is only possible through inline mode. Since DHTML fundamentally changes the way you manipulate pages, event registration must be extensible and highly adaptable. So there must be a corresponding event model. Netscape started with the third generation of browsers, and IE started with the fourth generation of browsers.
Because Netscape 3 began to support this new event registration model, it was the de facto standard before the browser wars. Therefore, Microsoft had to make concessions on compatibility for the last time for the countless pages on the Internet that use the Netscape event processing model.
So these two browsers, in fact all browsers support the following code:

Copy code Code As follows:

element.onclick = doSomething;

This is the best way to register an event. Whenever the user clicks on this HTML element, doSomething() will be executed. This is the only best way to register events across browsers, and it's important to have a deep understanding of this model and its limitations.
Because there is no official standard, I temporarily call it the traditional event registration model. At the same time, w3c has also standardized event registration, and Microsoft has also launched an advanced mode, but the traditional mode can still run well.


Advanced Event Register
Starting from Netscape 3/IE 4, JavaScript is able to recognize the attributes of a series of events on an element. Most HTML elements have onclick, onmouseover, onkeypress and other attributes. What attributes those elements have—which elements support which events—all depend on the browser.
These properties are nothing new to themselves either. It already exists in the oldest JavaScript browsers.

Copy code The code is as follows:

The A tag here has an onclick parameter, which becomes an attribute of the A element in JavaScript. Event handlers in older browsers could only be registered by setting parameters on elements in the page source code. If you want this script to be executed on all A tags, then you need to add onclick events to all links.
With the arrival of the traditional event registration model, these onclick, onmouseover or other event processing of HTML elements can be registered through JavaScript. Now you can add, modify, or remove event handlers without touching a single bit of HTML. When you access HTML elements through the DOM, you can write code like this:

Copy code The code is as follows:

element.onclick = doSomething;

Now our example function doSomething() is registered on the onclick attribute of the element element, and when the user clicks This element function will be executed. Note that event names must be lowercase.
To delete this event handler, simply leave the click event empty:

Copy the code The code is as follows:

element.onclick = null;

The event handler is the same as a normal JavaScript function. He can perform it even when the event has not occurred. If you write like this:

Copy code The code is as follows:

element.onclick()

Then doSomething will be executed as well. Although if it is a function that doesn't know what to do or generates an error, no real event occurs. So this is a rarely used method of executing event handlers.
Microsoft's IE5.5 and higher versions of IE also have a fireEvent() method to accomplish the same thing. Use as follows:

Copy code The code is as follows:

element.fireEvent('onclick')

No brackets
Note that you cannot use brackets when registering an event handler. The onclick method will be set to another function. If you write like this

Copy the code The code is as follows:

element.onclick = doSomething();

Then this function will be executed and its result will be registered to onclick. This is not what we expect, we just want the function to execute when the event occurs. In addition, the function is written to be executed when the event occurs. If there is no associated execution, it will 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 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 elsewhere, but here I'll give an overview in traditional mode.
In traditional mode this works as follows; note that this is slightly different from inline mode. Now the this keyword is in the function, not in the HTML parameter. This difference will be discussed separately later.

Copy code The code is as follows:

element.onclick = doSomething;
another_element.onclick = doSomething;
function doSomething() {
this.style.backgroundColor = '#cc0000';
}

If you register doSomething() as any HTML element click event, then when the user clicks on that element, the element will get a background.


Anonymous functions
Suppose you want all divs to change the background color when the mouse passes over it, and then return to the background color when the mouse leaves. To use this correctly, you can write like this:

Copy the code The code is as follows:

var x = document.getElementsByTagName('DIV');
for (var i=0;i x[i].onmouseover = over;
x[i ].onmouseout = out;
}

function over() {
this.style.backgroundColor='#cc0000'
}
this.style.backgroundColor='#ffffff'
}

These codes will run, no problem. But since over() and out() are relatively simple, you can use a more elegant anonymous function method to write:

Copy code The code is as follows:

for (var i=0;ix[i].onmouseover = function () {
this.style.backgroundColor='#cc0000'}
x[i].onmouseout = function () {
this.style.backgroundColor='#ffffff'}
}

Anyway, onmouseover and onmouseout both get a function. Rather than copying over() and out(), it is better to define an event handler directly on the script where the event is registered. Since these functions have no names, they are anonymous functions.
These two methods of registering event handlers are basically the same, the only difference is that the second one has less code. I really like anonymous functions and I use them when registering a simple event handler.


Problem
A small problem is that the onclick attribute can only contain one function in traditional mode. The problem arises when you want to register multiple event handlers for an event.
For example, you have written a draggable module. This module is registered on the onclick event handler so you can start dragging when you click on it. You also wrote a module that can track user clicks and send information 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 might look like this:

Copy the code The code is as follows:

element. onclick = startDragDrop;
element.onclick = spyOnUser;

This is where an error occurs. The second registration procedure will overwrite the first one, so only spyOnUser() will be executed when the user clicks on the element.
The solution is to register a method containing two methods:

Copy the code The code is as follows:

element.onclick = function () {
startDragDrop();
spyOnUser()
}

Flexible registration
But Let’s assume you don’t use two modules on every page of your website. If you still write like this:

Copy code The code is as follows:

element.onclick = function ( ) {
startDragDrop();
spyOnUser()
}

You will get an error message because one of the functions is undefined. So be especially careful when registering events. When we want to register spyOnUser() when startDragDrop() may have already been registered, then we can write like this:

Copy code The code is as follows:

var old = (element.onclick) ? element.onclick : function () {};
element.onclick = function () {
old();
spyOnUser()
};

First you define a variable old. If the element already has an onclick event handler, store it in 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, and the previously registered event handlers (if any) are also included.
Last question: What if you want to remove one of the event handlers? Now I'm not sure. You need to edit element.onclick() via some method, I haven't looked into this yet.
Other modes
We see that the traditional mode is very simple and easy to use, but the solution when you add several programs to an event is still ugly. W3C's event handler solves this problem very well.
Continue
If you want to continue learning, please read the next chapter.