Deep understanding of JS event binding

I. Traditional event model

Traditional event models have limitations.

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

The script model writes the event processing function to the js file and obtains elements from the page to bind the corresponding event function to trigger execution. However, there are also shortcomings:

1. One event is bound to multiple event listening functions, and the latter will overwrite the former.

2. Restrictions on repeated binding

3. Standardize the event object

Ii. Binding modern events

DOM2 events define two methods for adding and deleting events: addEventListener () and removeEventListener (). they receive three parameters: event name, function, bubble, or captured Boolean value (true indicates capture, false indicates bubble ).

In contrast, IE provides two similar methods: attachEvent () and detachEvent (), but the two methods of IE have another problem: this object cannot be passed (this in IE points to window) you can use the call method to impersonate an object:

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 anonymous functions are executed during addition, they cannot be deleted after addition. In addition, methods provided by IE may fail to execute binding events sequentially, and memory leakage may occur.

To solve this series of problems, it is necessary to further encapsulate the method and use the DOM2 standard for other browsers. For IE, the idea of adding and deleting the method based on the traditional mode is as follows:

1. adding is to store object events using the JS hash, assign an ID value for each object event, and determine whether the same processing function exists first in the order of added calls, if the event does not exist, add the event binding function to the hash. This solves the issue of sequential execution and repeated addition.

2. Check whether the traversal function matches when deleting the object. If yes, delete the object.

Summary:

I didn't have a deep understanding of JS event binding, or even stuck on the traditional event binding model. I still have a little understanding of program implementation. When I learned to encapsulate this part of the library, to learn a lot of JS object-oriented applications. Although js libraries like JQuery have already achieved a good encapsulation effect of the Data Binding Mechanism, I only know it, but I don't know why it still has a feeling of being in the dark, I personally analyze the specific implementation, and I will have an open-minded feeling. I also realized that a program with strong compatibility and versatility should consider a lot of content and solve many problems, these problems are gradually becoming clearer.