JS Learning Summary----DOM2 compatibility processing order problem

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.