Registering events in the oldest JavaScript browser can only be done in inline mode. Since DHTML fundamentally changed the way you manipulate pages, the registration of events must be extensible and adaptable. Therefore, there must be a corresponding event model. Netscape started in the third-generation browser, IE started in the fourth-generation browser.
Because Netscape 3 began to support this new event registration model, it was the de facto standard before the browser war. So Microsoft must not be the last to compromise on compatibility with the countless pages that use the Netscape event-handling model on the Internet.
So the two browsers, and indeed 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 the HTML element, dosomething () executes it. This is the only way to navigate through the registration event, and a deep understanding of the model and his limitations is also very important.
Because there is no official standard, so I would call the traditional event registration model (traditional event registration models). At the same time, the consortium has standardized event registration and Microsoft has introduced advanced models, but traditional models still work well.
Advanced Event Registration Program
Starting with Netscape 3/ie 4, JavaScript is able to recognize the properties of a series of events on an element. Most HTML elements have attributes such as onclick,onmouseover,onkeypress and so on. What attributes those elements have--which elements support which events--are dependent on the browser.
These attributes are not new to themselves. already exists in the oldest JavaScript browser.
Copy Code code as follows:
<a href= "somewhere.html" onclick= "dosomething ()" >
The A tag here has an onclick parameter, which in JavaScript becomes the attribute of the A element. The event handlers for the old browsers can only be registered by setting the parameters of the element in the source code of the page. If you want the script to execute on all the a tags, then you need to add the OnClick event to all the links above.
With the advent of the traditional event registration model, other event handling for these onclick,onmouseover or HTML elements can be registered through JavaScript. Now you can add, modify, or delete some event handlers without moving the HTML shred. When you access HTML elements through the DOM, you can write code as follows:
Copy Code code as follows:
Element.onclick = dosomething;
Now our example function dosomething () is registered on the element's OnClick property and is executed when the user clicks on the function. Note that the name of the event must all be lowercase.
To remove this event handler, simply leave the Click event blank:
Copy Code code as follows:
Event handlers are the same as normal JavaScript functions. He can perform even if the incident does not occur. If you write this:
Copy Code code as follows:
Then DoSomething will do the same. Although if it is a function that does not know what to do or produces an error, there is no real event happening. So this is a method that is rarely used to execute an event handler.
Microsoft's IE5.5 and later versions of IE also have a fireevent () method to do the same thing. Use the following:
Copy Code code as follows:
Element.fireevent (' onclick ')
No parentheses
Note that you cannot use parentheses when registering an event handler. The OnClick method is set to become another function. If you write this
Copy Code code as follows:
Element.onclick = DoSomething ();
Then the function executes and its results are registered on the onclick. This is not what we expected, we just want the function to execute when the event happens. Another function is written to execute when an event occurs, and if no associated execution can cause serious confusion and errors.
So we copy the entire dosomething () method in an 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 so beautiful that you can do a lot of things simply.
Unfortunately, although this is very powerful, it's still difficult to use if you don't know exactly how he works. I have a detailed discussion of this in another place where I do some overview in the traditional mode.
In the traditional mode this works as follows; Note that this is slightly different from inline mode. The This keyword is now in the function, not on the parameters of the HTML. This distinction will be followed by another.
Copy Code code as follows:
Element.onclick = dosomething;
Another_element.onclick = dosomething;
function dosomething () {
This.style.backgroundColor = ' #cc0000 ';
}
If you register dosomething () as the Click event for any HTML element, the element gets a background when the user clicks on that element.
anonymous functions (Anonymous functions)
Suppose you want all div to change the background color when the mouse passes, and then return to the back color when the mouse leaves. Correct use of this, you can write this:
Copy Code code as follows:
var x = document.getelementsbytagname (' DIV '); <br>for (var i=0;i<x.length;i++) {<br> X[i].onmouseover = Over;<br> x[i].onmouseout = out;<br>}<br><br>function over () {<br> This.style.backgroundcolor= ' #cc0000 ' <br>}<br><br>function out () {<br> This.style.backgroundcolor= ' #ffffff ' <BR>}<BR><BR>
This code can run, no problem. But since over () and out () are simpler, you can write in a more elegant way of anonymous functions:
Copy Code code as follows:
for (Var i=0;i<x.length;i++) {
X[i].onmouseover = function () {
This.style.backgroundcolor= ' #cc0000 '}
X[i].onmouseout = function () {
This.style.backgroundcolor= ' #ffffff '}
}
Anyway onmouseover and onmouseout are all getting a function. Rather than copying over () and out (), it is better to define an event handler directly on the script that registers the event. Since these functions have no names, they are anonymous functions.
The two methods of registering an event handler are basically the same, the only difference being that the second code is less. I like the anonymous function very much and I will use it when registering a simple event handler.
Problem
One small problem is that the onclick attribute in traditional mode can only contain one function. There is a problem when you want to register multiple event handlers for an event.
For example, you have written a module that can be dragged. This module is registered on the OnClick event handler so you can start dragging when you click it. You have also written a module that can track the user's clicks and send messages to the server when onunload, so that you know how your page is being used. This module also needs to register an onclick event on the element.
So it could be this:
Copy Code code as follows:
Element.onclick = Startdragdrop;
Element.onclick = Spyonuser;
This is where the error will occur. The second registration program overwrites the first one, then only Spyonuser () executes when the user clicks on the element.
The solution is to register a method that contains two methods:
Copy Code code as follows:
Element.onclick = function () {
Startdragdrop ();
Spyonuser ()
}
Flexibility of registration
But suppose you don't use two modules on every page of your site. If you still write this:
Copy Code code as follows:
Element.onclick = function () {
Startdragdrop ();
Spyonuser ()
}
You will get an error message because one of the functions is undefined. So be particularly careful when registering events. When we want to sign up for Spyonuser () when Startdragdrop () may have been registered, we can write this:
Copy Code code 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, save it in old, and if not, set the old to an empty function. Now you have to register a new event handler for a Div. The program then executes the old () and executes Spyonuser (). The new event handler is now added to the element, and the previously registered (if any) is included.
One last question: What if you want to remove one of the event handlers? Now I'm not so sure. You need to edit element.onclick () in a number of ways, and I haven't studied this issue yet.
Other modes
We see that traditional patterns are very easy to use, but when you add a few programs to an event, the solution is still pretty ugly. The event handler for the consortium solves the problem very well.
Go on
If you want to continue to study, please read the next chapter.
