In-depth understanding of JS event binding_javascript skills

1. Traditional event model

There are limitations in traditional event models.

Inline models are used in the form of HTML tag attributes and mixed with HTML. This method undoubtedly causes modification and expansion problems, and is rarely used anymore.

The script model writes event processing functions into js files, obtains elements from the page, and binds the corresponding event functions to trigger execution. But there are also shortcomings:

1. An event is bound to multiple event listening functions, and the latter will override the former.

2. Situations where repeated binding needs to be restricted

3. Standardized event object

2. Modern event binding

DOM2-level events define two methods for adding and deleting events: addEventListener() and removeEventListener(). They receive three parameters respectively: event name, function, bubbling or capturing Boolean value (true means capturing, false means risking Bubble).

Correspondingly, IE provides two similar methods, attachEvent() and detachEvent(), but IE's two methods have another problem: the this object cannot be passed (this in IE points to window). You can use the call method. Perform object impersonation:

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 an anonymous function is executed when adding, it cannot be deleted after adding; in addition, the method provided by IE will also cause the problem of being unable to execute binding events sequentially and causing memory leaks.

In order to solve this series of problems, it is necessary to further encapsulate the method. For other browsers, use the DOM2 level standard. For IE, use addition and deletion based on the traditional mode. The idea is:

1. Adding uses a JS hash table to store object events, and assigns an ID value to each object event. According to the added calling order, first determine whether the same processing function exists. If not, bind the events in sequence. Functions are added to the hash table, which solves the problem of being unable to execute sequentially and being added repeatedly

2. When deleting, the traversal function matching is judged, and if it exists, delete it

Summary:

I didn’t have a deep understanding of JS event binding before. I even stayed on the traditional event binding model, and my understanding of program implementation was still too shallow. This time I learned a lot when I learned about the encapsulation library. Object-oriented applications on JS. Although js libraries similar to JQuery have achieved a good encapsulation effect of the data binding mechanism, but you only know it and don't know why, you still feel like you are in the dark. Go and analyze the specific implementation in person. , you will have a feeling of sudden enlightenment, and you will also realize that to make a compatible and versatile program, you need to consider a lot of content and solve many problems, and you are gradually becoming clearer about these problems.