Js learning Summary: how to solve the sequential problem of DOM2 compatibility, jsdom2

Js learning Summary: how to solve the sequential problem of DOM2 compatibility, jsdom2

DOM2 compatibility solves the sequential problem as follows:

Solve the sequence problem: we do not need to use the event pool provided by the browser, but instead simulate the event pool implementation of the standard browser. The Code is as follows:

/* Bind: compatibility problem (binding method) for DOM2-level event binding @ parameter: curEle-> evenType, the element of the event to be bound-> event type to be bound ("click ", "mouseover") evenFn-> method to bind */function bind (curEle, evenType, evenFn) {if ('addeventlistener 'in document) {curEle. addEventListener (evenType, evenFn, false); return;} // apply the makeup to evenFn and paste the photo before the makeup into your brain var tempFn = function () {evenFn. call (curEle)} tempFn. photo = evenFn; // first determine whether a custom attribute exists before it exists. If it does not exist, create one. Because we want to store the results of multiple make-ups, let us set the value. Is an array if (! CurEle ["mybind" + evenType]) {// The array curEle ["mybind" + evenType] = [] according to different event types;} // solves the repeated problem: before you add a custom attribute to a container, check whether the container already exists. If yes, you do not need to add it again, similarly, you do not need to store var ary = curEle ["mybind" + evenType]; for (var I = 0; I <ary. length; I ++) {var cur = ary [I]; if (cur. photo === evenFn) {return ;}} ary. push (tempFn); curEle. attachEvent ("on" + evenType, tempFn); // The starting idea here is to change the point of this and not point this to window/* box. attachEvent ("onclick", f Unction () {fn1.call (box)}) solves this problem, but throws a new problem, I don't know how to delete it (we don't know who the anonymous function is) var tempFn = function () {fn1.call (box)} box. attachEvent ("onclick", tempFn); box. detachEvent ("onclick", tempFn); */} function unbind (curEle, evenType, evenFn) {if ('removeeventlistener 'in document) {curEle. removeEventListener (evenType, evenFn, false); return;} // retrieve the makeup result from evenFn to curEle ["myBind, find and then remove the makeup result from the event pool var ary = CurEle ['mybind' + evenType]; for (var I = 0; I <ary. length; I ++) {if (ary [I]. photo = evenFn) {ary. splice (I, 1) // find and remove the corresponding curEle from the container you stored. detachEvent ("on" + evenType, ary [I]); // remove break from the event pool; }}// create an event pool, in addition, add the methods to be bound to the current element to function on (curEle, evenType, evenFn) {if (! CurEle ["myEvent" + evenType]) {curEle ["myEvent" + evenType] = [];} var ary = curEle ["myEvent" + evenType]; for (var I = 0; I <ary. length; I ++) {var cur = ary [I]; if (cur = evenFn) {return ;}} ary. push (evenFn); // when we execute on, we bind a click action to the current element. When we click it, execute the run method: this in the run method is the current element curEle, and the browser passes a MouseEvent event object // curEle to run. addEventListener (evenType, run, false); bind (curEle, evenType, run)} // remove a function off (cu REle, evenType, evenFn) {var ary = curEle ["myEvent" + evenType]; for (var I = 0; I <ary. length; I ++) {var cur = ary [I]; if (cur = evenFn) {ary. splice (I, 1); break ;}}// we only bind a method run to the click behavior of the current element. When a click is triggered, the run method is executed, in the run method, run the function run (e) {// this currently clicked object curEle e = e | window. event; var flag = e.tar get? True: false; if (! Flag) {e.tar get = e. srcElement;} // obtain the methods bound to the event pool, and execute these methods in sequence. var ary = this ["myEvent" + e. type]; // e.tar get also represents curEle for (var I = 0; I <ary. length; I ++) {var tempFn = ary [I]; tempFn. call (this, e );}}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.