Solve the order problem: We do not use the browser to bring the event pool, but the self-simulation of the standard browser event pool implementation, the code is as follows:
/*bind: Handling compatibility issues with DOM2-level event bindings (binding methods) @parameter:curele-> The element to bind the event to eventype-> the type of event to bind ("click", "Mouse Over ") evenfn-> the method to bind*/functionbind (CURELE,EVENTYPE,EVENFN) {if(' AddEventListener 'inchdocument) {Curele.addeventlistener (EVENTYPE,EVENFN,false); return; } //give Evenfn makeup and put the photo before the make-up to his corresponding forehead varTEMPFN =function() {Evenfn.call (Curele)} Tempfn.photo=EVENFN; //first to determine whether a custom attribute exists before, and does not exist, create one, because we want to store multiple makeup results, so we let the value is an array if(!curele["Mybind" +eventype]) {//different array depending on the event typecurele["Mybind" +eventype] = []; } //Resolve duplicate issues: each time you add to the container of the custom attribute to see if it already exists, there is no need to add it again, and it does not have to be stored in the event pool. varary = curele["Mybind" +Eventype]; for(vari = 0;i<ary.length;i++){ varCur =Ary[i]; if(Cur.photo = = =EVENFN) { return; }} ary.push (TEMPFN); Curele.attachevent ("On" +EVENTYPE,TEMPFN); //the beginning of the idea here is to change the point of this, which does not point to window /*box.attachevent ("onclick", function () {Fn1.call (box)}) This solves the problem of this, but throws a new question, and I don't know How to delete (we don't know who the anonymous function is) var TEMPFN = function () {Fn1.call (box)} box.attachevent ("onclick", TE MPFN); Box.detachevent ("onclick", TEMPFN); */}functionUnbind (CURELE,EVENTYPE,EVENFN) {if(' RemoveEventListener 'inchdocument) {Curele.removeeventlistener (EVENTYPE,EVENFN,false); return; } //take Evenfn to curele["Mybind"] here to find the results after the makeup, found in the event pool after the makeup of the results of the removal of the event pool varary = curele[' mybind ' +Eventype]; for(vari = 0;i<ary.length;i++){ if(ary[i].photo===EVENFN) {Ary.splice (i,1)//remove the corresponding removal in the container of your own storage after finding itCurele.detachevent ("on" +eventype,ary[i]);//also remove the corresponding in the event pool. Break; } } }//Create an event pool and add the methods that need to bind the current element to the event pool in turnfunctionOn (CURELE,EVENTYPE,EVENFN) {if(!curele["MyEvent" +Eventype]) {curele["MyEvent" +eventype] = []; } varary = curele["MyEvent" +Eventype]; for(vari = 0;i<ary.length;i++){ varCur =Ary[i]; if(cur===EVENFN) { return; }} ary.push (EVENFN); //when executing on, we bind a click behavior to the current element and execute the Run method when clicked: The This in the Run method is the current element Curele, and the browser passes a MouseEvent event object to run //Curele.addeventlistener (eventype,run,false);bind (Curele,eventype,run)}//to remove a method from its own event poolfunctionoff (CURELE,EVENTYPE,EVENFN) {varary = curele["MyEvent" +Eventype]; for(vari = 0;i<ary.length;i++){ varCur =Ary[i]; if(cur===EVENFN) {Ary.splice (i,1); Break; } }}//We only bind a method run for the click behavior of the current element, and when the click is triggered the Run method is executed in the Run method according to the order in which I stored the method.functionRun (e) {//This is the object that is currently clicked CureleE = e | |window.event; varFlag = E.target?true:false; if(!flag) {E.target=e.srcelement; } //get the methods that are bound in your event pool, and let these methods execute sequentially . varary = This["MyEvent" +e.type];//E.target also represents Curele for(vari = 0;i<ary.length;i++){ varTEMPFN =Ary[i]; Tempfn.call ( This, E); }}
JS Learning Summary----DOM2 compatibility processing order problem