JS Event binding deep understanding of _javascript skills

First, the traditional event model

There are limitations in the traditional event model.

Inline models are used in the form of HTML tag attributes and are mixed with HTML, which undoubtedly creates problems with modifications and extensions that are rarely used.

The scripting model is to write the event handler function to the JS file, get the element from the page to bind the event function to trigger execution. But there are also deficiencies:

1. An event binds multiple event listener functions, which will overwrite the former.

2. Need to limit the situation of repeated bindings

3. Standardize Event objects

second, modern event binding

The DOM2 level event defines two methods for adding and deleting events: AddEventListener (), RemoveEventListener (). They receive three parameters: the event name, function, bubbling, or captured Boolean (true means capture, False indicates bubbling).

In contrast, IE provides a similar two methods attachevent () and detachevent (), but there is another problem with IE's two methods: the This object cannot be passed (this point window in IE) can be used for object impersonation 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, because anonymous functions are executed when they are added, they cannot be deleted after they are added, and the IE provides methods that fail to perform binding events sequentially and have memory leaks.

In order to solve this series of problems, it is necessary to further encapsulate the method, to other browsers using the DOM2 level standard, for IE, the use of traditional mode based on the addition, deletion, ideas for:

1. Add is the use of JS hash table storage Object events, assign an ID value to each object event, and, in the order of invocation added, first determine if the same handler function exists, and then add the event-binding function to the hash list in turn, which resolves the problem that cannot be executed sequentially and repeatedly added

2. When the deletion of the traversal function to match the judgment, the existence is deleted

Summarize:

JS before the event binding and not too deep understanding, or even stay in the traditional event binding model, on the realization of the program is too shallow, this time to learn the package library This part of the content, only to learn a lot of JS above to the object of application. Although similar to jquery in such a JS library has achieved a good data binding mechanism of encapsulation effect, but only know it, I do not know why there will be a kind of ignorant feeling, personally to analyze the specific implementation, there will be a feeling of enlightened, but also realized that a good compatibility, More versatile programs need to consider a lot of content, solve a lot of problems, but also in these problems gradually clear a lot.