1. Traditional event model
There are limitations in traditional event models.
The inline model is used in the form of HTML tag attributes and is mixed with HTML. This method undoubtedly causes problems with modification and extension and is rarely used.
The script model writes event processing functions into a js file, obtains elements from the page to bind the corresponding event functions to trigger execution. But there are also shortcomings:
1. One event binds multiple event listening functions, the latter overrides the former.
2. Repeated binding needs to be restricted
3. Standardize event objects
2. Modern event binding
DOM2-level events define two methods for adding and deleting events: addEventListener() and removeEventListener(). They receive three parameters: event name, function, bubbling or captured boolean value (true means capture, false means bubbling).
Correspondingly, IE provides two similar methods attachedEvent() and detachEvent(), but IE's two methods have other problems: it is impossible to pass this object (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 when adding, they cannot be deleted after adding; in addition, the IE methods provided by IE will also have problems such as unsuccessful execution of binding events in sequence and memory leaks.
In order to solve this series of problems, it is necessary to further encapsulate the method and use the DOM2 level standard for other browsers. For IE, adding and deleting based on traditional mode is adopted. The idea is:
1. Adding is to use JS's hash table to store object events, assign an ID value to each object event, and first determine whether the same processing function exists in the order of addition. If it does not exist, add the event binding function to the hash table in turn. This solves the problem of inability to execute in sequence and repeated additions.
2. When deleting, it is used to judge the matching of the traversal function. If it exists, it is deleted.
Summarize:
I didn't have much deep understanding of JS event binding before, and I even stayed in the traditional event binding model, and I still had too shallow understanding of program implementation. This time, when I learned the encapsulation library, I learned a lot of object-oriented applications on JS. Although js libraries like JQuery have achieved a good encapsulation effect of data binding mechanisms, I only know the reason, but I don’t know why, and I feel like I’m in the dark. If you analyze the specific implementation personally, you will feel a sudden enlightenment. I also realize that to do a good job of a compatible and universal program, you need to consider a lot of content and solve many problems, and you are gradually clearing up a lot of these problems.