JavaScript Event Learning Chapter 5 Advanced Event Registration Model_javascript skills

Both W3C and Microsoft are focusing on developing their own event registration models to replace Netscape's traditional model. Although I am not very fond of Microsoft's model, w3c's is still good, except for the mouse positioning problem. However, only a small number of browsers currently support it.
W3C
W3C’s DOM level event specification takes note of the problems of the traditional model. It provides a good solution if you want to bind multiple events to an element.
The key to the W3C event registration model is addEventListener(). You give him three parameters: the event type, the function to be executed and a Boolean value (true or false) which I will explain in a moment. To register the well-known doSomething() function to the onclick event of an element, you can do this:
element.addEventListener('click',doSomething,false)
The charm of this model is that we can add You can add as many monitors as you want. If we use our previous example in the traditional mode, we can write it like this:
element.addEventListener('click',startDragDrop,false)
element.addEventListener('click',spyOnUser,false)
Both event handlers are executed when the user clicks on the element. It should be noted that the W3C standard cannot determine which event is executed first. So you can't think that startDragDrop() is executed just before spyOnUser().
Removing event handlers is also very simple, just use removeEventListener(). So:
element.removeEventListener('click',spyOnUser,false)
The second event handler will be removed but the first one will not change. A very beautiful program that completely solves the problems in the traditional mode.

Anonymous functions
You can still use anonymous functions in W3C mode:

Copy code The code is as follows :

element.addEventListener('click',function () {
this.style.backgroundColor = '#cc0000'
},false)

true or false
true or false is the last parameter of addEventListener, which means you want your function to be executed in the capture phase or the bubbling phase. If you're not sure, 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 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 discuss this in detail elsewhere.
Under the w3c model its operation is the same as in the traditional mode: it represents the HTML element that is currently handling the event.

Copy code The code is as follows:

element.addEventListener('click',doSomething,false) ;
another_element.addEventListener('click',doSomething,false);
function doSomething() {
this.style.backgroundColor = '#cc0000';
}

If you register doSomething() on the click practice of any HTML element, then the background of this element will turn red when the user clicks.

Which event handler is registered?
One problem with the current W3C event registration model is that you don’t know which event handlers are registered for an element. In traditional mode, you can:
alert(element.onclick)
You can see which functions are registered. Undefined means that no function is registered for this event. Only in recent DOM Level 3 events did the W3C add an eventListenerList to store registered event handlers. Because it is so new, few browsers support it. However, the problem has been solved.
Fortunately, removeEventListener() will not return an error because you have not registered an event for the element, so you can use removeEventLister() without worrying.
Microsoft
Microsoft also has an event registration model. It's very similar to W3C's, but has a serious flaw.
Register an event handler to attach to an element:
element.attachEvent('onclick',doSomething)
Alternatively, you need two event handlers:
element.attachEvent('onclick' ,startDragDrop)
element.attachEvent('onclick',spyOnUser)
Removing one is also very simple:
element.detachEvent('onclick',spyOnUser)

Defects
Follow Compared with W3C, Microsoft has two serious problems:
, events always bubble up, and there is no possibility of being captured.
. The event handler is referenced, not copied, so the this keyword always points to window and is useless at all.
The result of these two problems is that if an event bubbles up, it is impossible for you to know which element is handling the event. I will explain it in detail in the later chapter on the sequence of events.
And Microsoft’s standard is only supported by IE and cannot be used across browsers. Even if you are just writing scripts for Windows browsers, it is best not to use them, because bubbling problems will make things get out of hand.
Continue
If you want to continue learning, please read the next chapter.
Original address: http://www.quirksmode.org/js/events_advanced.html
First translation. Please include me. My twitter: @rehawk