Both the consortium and Microsoft have focused on developing their own event registration models to replace Netscape's traditional model. Although I am not very cold to the Microsoft model, but the whole of the consortium is good, in addition to this mouse positioning problem. But now only a small number of browser support.
W3c
The DOM level Event specification for the Consortium notes the problem of traditional patterns. He provides a good solution to the idea that you want to bind multiple events to an element.
AddEventListener () is the key to the registration model for the event of the consortium. You give him three parameters: event type, function to execute and a Boolean value (True or false) I'll explain later. Register our well-known dosomething () function on the onclick event of an element, and you can do this:
Element.addeventlistener (' click ', Dosomething,false)
The beauty of this model is that we can add as much listening as we want. If we use the example in our previous traditional model, we can write this:
Element.addeventlistener (' click ', Startdragdrop,false)
Element.addeventlistener (' click ', Spyonuser,false)
Two event handlers execute when the user clicks on the element. It should be noted that the standard of the consortium does not determine which event to execute first. So you can't assume that Startdragdrop () is executed before Spyonuser ().
Removing an event handler is also very simple, with RemoveEventListener () on the line. So:
Element.removeeventlistener (' click ', Spyonuser,false)
The second event handler is removed but the first is not changed. Very beautiful program, completely solve the traditional mode of the problem.
anonymous functions
You can still use anonymous functions in the mode:
Copy Code code as follows:
Element.addeventlistener (' click ', function () {
This.style.backgroundColor = ' #cc0000 '
},false)
True or False
True or FALSE is the last parameter of AddEventListener, meaning you want your function to be executed in the capture or bubbling phase. If you are unsure, use false (bubbling phase).
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 about this in another place.
Under the model, he works the same way as in traditional mode: he represents the HTML element that is now processing the event.
Copy Code code as follows:
Element.addeventlistener (' click ', Dosomething,false);
Another_element.addeventlistener (' click ', Dosomething,false);
function dosomething () {
This.style.backgroundColor = ' #cc0000 ';
}
If you register dosomething () in any HTML element click Practice, the background of the element will become red when the user clicks it.
Which event handler is registered?
One of the problems with this event registration model is that you don't know what event handlers are registered for an element. Under the traditional mode you can:
Alert (Element.onclick)
You can see which functions are registered, undefined is no function registered on this event. Only in the recent DOM Level 3 event did the Consortium add a eventlistenerlist to store the event handlers that have already been registered. Because it's so new, there's very little browser support. However, the problem has been solved.
Fortunately RemoveEventListener () does not return an error because you did not register an event for the element, so you can use Removeeventlister () without worrying.
Microsoft
Microsoft also has an event registration model. It's a lot like the one in the consortium, but there's a serious flaw.
Register an event handler and attach to an element:
Element.attachevent (' onclick ', dosomething)
Or, you need two event handlers:
Element.attachevent (' onclick ', Startdragdrop)
Element.attachevent (' onclick ', spyonuser)
Removing one is also very simple:
Element.detachevent (' onclick ', spyonuser)
Defects
Compared to the consortium, Microsoft has two serious problems:
, events are always bubbling, and there is no possibility of being caught.
, the event handler is referenced, not copied, so the This keyword always points to window and does not work at all.
The result of these two problems is that if an event bubbles up then you are not likely to know which element is handling the event. The sequence of events in the following chapter I will explain in detail.
and Microsoft's standards are only supported by IE and cannot be used across browsers. Even if you're just writing a script to a Windows browser, it's best not to use it, because bubbling problems can make things worse.
Go on
If you want to continue to study, please read the next chapter.
Original address: http://www.quirksmode.org/js/events_advanced.html
For the first time, everyone included my Twitter: @rehawk
