JS Learning Note-Event binding

A traditional model of events

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 a problem of modification and extension, which is seldom used.

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

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

2. need to limit duplication of bindings

3. standardize the event Object

Second, modern event binding

DOM2 level events define two methods for adding and deleting events: AddEventListener () , RemoveEventListener (). they receive three parameters respectively: event name, function, bubbling, or captured Boolean value ( true represents a capture, false indicates bubbling).

   in correspondence with it,IEprovides a similar two-wayattachevent ()and thedetachevent (), butIEThere are additional problems with the two methods: unable to deliver ThisObject (IEin the ThisPointingwindow) You can usePagermethod 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 the addition of the anonymous function is executed, so the addition cannot be deleted , and the IE provides methods can not be executed in sequence bound events, there is a memory leak problem.

In order to solve this series of problems, it is necessary to further encapsulate the method, to other browsers using DOM2 level standards, for IE, Based on the traditional mode of adding, deleting, the idea is:

1. Add a hash-table storage object event that uses JS, assign an ID value to each object event, and, in the order of the added calls, first determine if there is the same handler function. If not present, add the event binding function to the hash list in turn, which resolves an issue that cannot be executed sequentially and added repeatedly

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

Summarize:

before the JS event binding is not too deep understanding, or even stay in the traditional event binding model, on the implementation of the program or understanding too shallow, this time to learn the package library This part of the content, only to learn a lot of JS the application to the object above. Although similar to the JQuery such 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 sense of the dark, Personally to analyze the specific implementation, there will be an enlightened feeling, but also realized that a good compatibility, versatility and strong procedures to consider a lot of content, solve a lot of problems, but also in these problems gradually clear a lot.