[Original translation] a deep understanding of javascript event processing function binding trilogy (III)-Advanced event function binding model

In this article, I will explain two more advanced event binding models: W3CAnd Microsoft. And because there is no really cross-browser, at least now, they are not in favor of using them.

 

Both W3C and Microsoft have developed their own event binding models to replace the traditional Netscape model. I'm not happy with Microsoft's model, but W3C is good except for a small flaw, but unfortunately few browsers support it.

 

W3c

W3c DOM level2 pays special attention to problems in traditional models. It provides a simple binding method. You can bind a random number of processing functions to the same element.

 

The key to the w3c event binding model is its addEventListener () method. You need to input three parameters: the event type, the function to be executed, and a Boolean value (true or false). I will then explain the meaning of this Boolean value. For example, to bind an unfamiliar doSomething () function to onclick, you can do this:

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

 

The beauty of this model is that we can use many event listening elements. If we use the previous example, we should write it like this:

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

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

 

When you click an element, both processing functions are triggered. Note that the W3C model does not indicate which handler will be triggered first, so you cannot directly assume that startDragDrop () will be executed before spyOnUser.

 

To remove a handler, use the removeEventListener () method. Which processing function can you choose to remove, such:

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

 

Delete the second function, but leave the first function. That's great. It solves the problems we encounter in traditional models.

 

Anonymous Functions

You can also use anonymous functions in the W3C model.

element.addEventListener('click',function () {

this.style.backgroundColor = '#cc0000'

},false)

 

True or false

True or false is the last parameter of addEventListener, which means that the processing function is executed in the capture or bubble phase. If you are not sure, use false (bubble)

 

This

In javascript, The this keyword is a reference to the "owner" of a function. It is very useful in event processing functions. It is a reference to html elements that are processing events, so that you can easily access them.

 

Unfortunately, although this keyword is very powerful, it is also very difficult to use if you are not very clear about how it works. I have discussed it in another article.

 

In the W3C model, it works in the same principle as in the traditional model and is a reference to html elements that are processing events.

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

another_element.addEventListener('click',doSomething,false);

function doSomething() {

this.style.backgroundColor = '#cc0000';

}

 

If you bind a doSomething () function to the click event of any html element, it turns into a red background when you click it.

 

Which function is bound?

One of the problems with W3C binding models is that you cannot find the processing functions that have been bound to an element. In traditional models, you can do this:

alert(element.onclick)

 

You can see the function bound to it. If the prompt is undefined, nothing is registered. In the latest DOM Level 3 Events, W3C added eventListenerList to store the function currently bound. This feature has not yet been supported by all browsers, and it is too new (note: this is the case ). In any case, this problem is still solved.

Fortunately, if you want to remove a function that is not bound to it, removeEventListener () does not provide an error message, so you can use removeEventListener () with no scrubs ()

Microsoft

Microsoft also developed its own binding model. It looks like W3C, but it has some serious defects.

To bind a handler: attach it to an element:

element.attachEvent('onclick',doSomething)

 

Or you need two processing functions:

element.attachEvent('onclick',startDragDrop)

element.attachEvent('onclick',spyOnUser)

 

It's easy to remove one:

element.detachEvent('onclick',spyOnUser)

 

Defects

Compared with the W3C model, the Microsoft model has two serious defects:

1. Events are always bubbling and there is no possibility of capturing
2. Processing functions are always referenced rather than copied. Therefore, the "this" keyword always points to the window, which is useless at all.

These two vulnerabilities may cause an event to bubble up and it is impossible to know which html element is processing the event. I will explain in detail in another article

 

Microsoft models are only supported in IE5 or later versions, so they cannot boast of browsers. But even in IE, it is better not to use it, because the bubble problem will become quite tricky in some complicated applications.