JS event binding in depth understanding

I. traditional event model

There are limitations in the traditional event model.

Inline models are used as HTML tag attributes, mixed with HTML, which undoubtedly causes modification and extension problems and is rarely used anymore.

The script model is to write the event handler function to the js file and get the element from the page to bind the corresponding event function to trigger execution. But there are also shortcomings:

1. An event binds multiple event listeners, which override the former.

2. You need to limit the cases of duplicate bindings

3. Standardize the event object

Ii. Modern event binding

Dom2-level events define two methods for adding and removing events: addEventListener() and removeEventListener(). They each receive three parameters: the event name, the function, the bubbling, or the captured Boolean (true for capture and false for bubbling).

In contrast, IE provides two similar methods attachEvent() and detachEvent(), but there is another problem with IE's two methods: this object cannot be passed (this points to the window in IE) and can be impersonated using the call method:

function addEvent(obj,type,fn){ 
if(typeof obj.addEventListener != 'undefined'){ 
obj.addEventListener(type,fn,false); 
}else if(obj.attachEvent != 'undefined'){ 
obj.attachEvent('on' + type,function(){ 
fn.call(obj,window.event); 
}); 
} 
};

However, since the anonymous function is executed when adding, it cannot be deleted after adding. In addition, the methods provided by IE can't execute binding events sequentially, and there are memory leaks.

In order to solve this series of problems, it is necessary to further encapsulate the method. Dom2-level standard is used for other browsers. For Internet explorer, the traditional mode of adding and deleting is adopted.

1. Add is to use JS hash table to store object events, assign an ID value for each object event, determine whether the same processing function exists in the first place according to the added calling order, and add the event binding function to the hash table in turn if it does not exist, so as to solve the problem that cannot be executed in order and repeatedly added

2. Judge the ergodic function match when deleting, and delete if there is

Conclusion:

Prior to the JS event binding is not too deep understanding, even stay in the traditional event binding model, or the realization of the program is too shallow understanding, this part of the packaging library learning, learned a lot of JS object-oriented applications. Although like JQuery js library has achieved very good data binding mechanism of encapsulation effect, only learning, but I don't know why there is will there is a dark, to analyze the specific implementation, there will be a feeling of suddenly, also realized that a good compatibility, versatility of application more to consider a lot of content, solve many problems, is also gradually clear in these problems a lot.