[Translation] Chapter 5 of JavaScript event Learning: Advanced event registration Model

Document directory

• Anonymous Functions
• True or false
• This
• Which event handler is registered?
• Defects

In this chapter, I will explain two advanced time registration models: W3C and Microsoft. Because neither of these methods can be cross-browser, they do not have many use cases.

Both W3C and Microsoft are developing their own event registration models to replace the traditional Netscape model. Although I am not very familiar with Microsoft models, W3C is still good, except for the mouse positioning problem. However, only a small number of browsers are supported.

W3C

W3C dom-level event specification noticed the problem of the traditional mode. It provides a good solution for you 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). I will explain it later. Register the well-known dosomething () function to an onclick event of an element. You can do this:

element.addEventListener('click',doSomething,false)

The charm of this model is that we can add as many listeners as we want. If we use the examples in our previous traditional model, we can write them as follows:

element.addEventListener('click',startDragDrop,false)element.addEventListener('click',spyOnUser,false)

When a user clicks an element, both event handlers are executed. Note that the W3C standard cannot determine which event is executed first. Therefore, you cannot think that startdragdrop () is executed before spyonuser.

Removing the event handler is also very simple, just use removeeventlistener. Therefore:

element.removeEventListener('click',spyOnUser,false)

The second event handler will be removed, but the first handler will not change. A very beautiful program completely solves the problems in the traditional mode.

 

Anonymous Functions

In W3C mode, you can still use anonymous functions:

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

 

 

True or false

True or false is the last parameter of addeventlistener, which means that you want your function to be executed in the capture or bubble phase. If you are not sure, use false (bubble stage ).

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 W3C model, he operates the same way as in the traditional mode: he represents the HTML elements that are currently processing events.

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

If you register dosomething () on the click operation of any HTML element, the background of the element becomes red when you click it.

 

Which event handler is registered?

One problem with the W3C event registration mode is that you do not know which event handlers are registered for an element. In the traditional mode, you can:
Alert (element. onclick)
You can see which functions are registered. undefined means that no function is registered in this event. Only the W3C added an eventlistenerlist in the latest Dom Level 3 event to store the registered event handler. Because it is too new, there is little browser support. However, the problem has been solved.

Fortunately, removeeventlistener () does not return errors because you have not registered an event of an element, so you do not have to worry about using removeeventlister ().

Microsoft

Microsoft also has an event registration model. It is similar to W3C but has a serious defect.

Register an event handler and attach it to an element:

element.attachEvent('onclick',doSomething)

Alternatively, you need two Event Handlers:

element.attachEvent('onclick',startDragDrop)element.attachEvent('onclick',spyOnUser)

It is also very easy to remove one:

element.detachEvent('onclick',spyOnUser)

 

Defects

Compared with W3C, Microsoft has two serious problems:
1. Events are always bubbling and there is no possibility of being captured.
2. The event handler is referenced, rather than copied. Therefore, the this keyword always points to the window and is useless at all.
The result of these two problems is that if an event is bubbling, you may not know which element is processing the event. I will explain in detail in the subsequent event sequence chapter.

Moreover, Microsoft's standards are only supported by IE and cannot be used across browsers. Even if you write a script for a windows browser, it is best not to use it because the bubble issue will make things unmanageable.

Continue

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

Address: http://www.quirksmode.org/js/events_advanced.html
My Twitter: @ rehawk