JavaScript event handling Model examples illustrate _javascript techniques

Event is the heartbeat of the JavaScript application and the glue that sticks everything together. When we have some kind of interaction with a Web page in a browser, the event occurs. The event may be a user clicking on something, a specific element of the mouse, or pressing some key on the keyboard. Events can also occur in a Web browser, such as when a Web page is loaded, or if the user scrolls through the window or changes the window size.

By using JavaScript, you can monitor the occurrence of specific events and specify that certain events occur to respond to these events.

First, add event monitoring

Ie:

Copy Code code as follows:

Attachevent ("onclick", function () {...})//Add
DetachEvent ("onclick", function () {...})//delete

Ff:

Copy Code code as follows:

AddEventListener ("click", Function () {...},false)
You can add multiple event listeners to an object, unlike the default object event
Removeeventlistenner ("click", Function () {...},false)

Second, get the event object

Ie:

Copy Code code as follows:

Op.onclick=function () {
ver oevent = window.event; As a property of window
}

Ff:

Copy Code code as follows:

Op.onclick=function (oevent) {
.//control by passing in parameters
}

General:

Copy Code code as follows:

Op.onclick=function (oevent) {
if (window.event) {
Oevent=window.event;
}
}

//Instant get generic, but they return the object's properties and methods are not consistent, but can be used through the eventutil to solve!

var eventutil = new Object; /**//* This method is used to add an event to a particular object, Otarget is the specified object, Seventtype is the event type, such as Click, KeyDown, Fnhandler is the event callback function/Eventutil.addeventhandler = function (Otarget, Seventtype, Fnhandler) {//firefox case if (otarget.addeventlistener) {Otarget.addeventlisten
   ER (Seventtype, Fnhandler, false);
   }//ie else if (otarget.attachevent) {otarget.attachevent ("on" + Seventtype, Fnhandler);
   else {otarget["on" + seventtype] = Fnhandler;
}
}; /* This method is used to remove a specific event for a specific object, Otarget is the specified object, Seventtype is the event type, such as Click, KeyDown, Fnhandler is the event callback function/Eventutil.removeeventhandler = function (Otarget, Seventtype, Fnhandler) {if (Otarget.removeeventlistener) {Otarget.removeeventlistener (SEven
   Ttype, Fnhandler, false);
   else if (otarget.detachevent) {otarget.detachevent ("on" + Seventtype, Fnhandler);
   else {otarget["on" + seventtype] = null;

}
}; /* Format event, which provides a consistent event/eventutil.formatevent = function (oevent) by using this method because of different ways of getting events under IE and other browsers and the properties of events. {//isie and Iswin refer to a JS file to determine the browser and operating system type if (Isie && iswin) {Oevent.charcode = (Oevent.type = "KeyPress" ) ?
     oevent.keycode:0;
     IE only supports bubbling, does not support capturing oevent.eventphase = 2;
     Oevent.ischar = (Oevent.charcode > 0);
     Oevent.pagex = Oevent.clientx + document.body.scrollLeft;
     Oevent.pagey = Oevent.clienty + document.body.scrollTop;
     The default behavior of blocking Events Oevent.preventdefault = function () {this.returnvalue = false;

      }; Converts the toelement,fromelement to the standard relatedtarget if (Oevent.type = = "Mouseout") {Oevent.relatedtarget = Oevent.toe
     lement;
     else if (Oevent.type = = "MouseOver") {oevent.relatedtarget = oevent.fromelement;
     }//Cancel bubbling oevent.stoppropagation = function () {this.cancelbubble = true;

     };
     Oevent.target = oevent.srcelement;
   Add event occurrence time attribute, ie has no oevent.time = (new Date). GetTime ();
return oevent;

};
   Eventutil.getevent = function () {if (window.event) {  Format IE's event return this.formatevent (window.event);
   else {return eventutil.getevent.caller.arguments[0]; }
};

* * With the previous decision browser and system type JS file, by introducing some of the name of the obvious global variables as a result of judgment, use the need to be careful variable name conflict: * * var suseragent = navigator.useragent;

var fappversion = parsefloat (navigator.appversion);
  function CompareVersions (SVersion1, SVersion2) {var aVersion1 = Sversion1.split (".");
  
  var aVersion2 = Sversion2.split ("."); if (Aversion1.length > Aversion2.length) {for (Var i=0 i < aversion1.length-aversion2.length; i++) {A
    Version2.push ("0"); } else if (Aversion1.length < aversion2.length) {for (Var i=0 i < aversion2.length-aversion1.length; i++
    ) {Aversion1.push ("0");
    for (Var i=0 i < Aversion1.length i++) {if (aversion1[i) < Aversion2[i]) {return-1;
    else if (Aversion1[i] > Aversion2[i]) {return 1;

} return 0;
var Isopera = Suseragent.indexof ("Opera") >-1;

var isMinOpera4 = IsMinOpera5 = IsMinOpera6 = IsMinOpera7 = Isminopera7_5 = false;
  if (Isopera) {var foperaversion; if (navigator.AppName = = "Opera") {foperaversion = fappversion;
    else {var reoperaversion = new RegExp ("Opera (//d+//.//d+)");
    Reoperaversion.test (suseragent);
  Foperaversion = parsefloat (regexp["$");
  } ISMINOPERA4 = Foperaversion >= 4;
  IsMinOpera5 = foperaversion >= 5;
  IsMinOpera6 = foperaversion >= 6;
  IsMinOpera7 = foperaversion >= 7;
Isminopera7_5 = Foperaversion >= 7.5; var iskhtml = Suseragent.indexof ("khtml") >-1 | | Suseragent.indexof ("Konqueror") >-1 | | 
       
Suseragent.indexof ("AppleWebKit") >-1;
var IsMinSafari1 = Isminsafari1_2 = false;

var isminkonq2_2 = isMinKonq3 = Isminkonq3_1 = Isminkonq3_2 = false;
  if (iskhtml) {Issafari = Suseragent.indexof ("AppleWebKit") >-1;

  Iskonq = Suseragent.indexof ("Konqueror") >-1; if (Issafari) {var reapplewebkit = new RegExp ("applewebkit///"//d+ (?:/
    /.//d*) ");
    Reapplewebkit.test (suseragent);

var fapplewebkitversion = parsefloat (regexp["$");    IsMinSafari1 = fapplewebkitversion >= 85;
  Isminsafari1_2 = Fapplewebkitversion >= 124; else if (Iskonq) {var rekonq = new RegExp ("konqueror///"//d+ (?:/ /.//d+ (?:/
    /.//D) ");
    Rekonq.test (suseragent);
    Isminkonq2_2 = CompareVersions (regexp["$"], "2.2") >= 0;
    ISMINKONQ3 = CompareVersions (regexp["$"], "3.0") >= 0;
    Isminkonq3_1 = CompareVersions (regexp["$"], "3.1") >= 0;
  Isminkonq3_2 = CompareVersions (regexp["$"], "3.2") >= 0; } var Isie = Suseragent.indexof ("compatible") >-1 && suseragent.indexof ("MSIE") >-1 &A
      
mp;&!isopera;

var isMinIE4 = isMinIE5 = Isminie5_5 = IsMinIE6 = false;
  if (Isie) {var reie = new RegExp ("MSIE (//d+//.//d+);");
  Reie.test (suseragent);

  var fieversion = parsefloat (regexp["$");
  isMinIE4 = Fieversion >= 4;
  isMinIE5 = fieversion >= 5;
  Isminie5_5 = Fieversion >= 5.5;
isMinIE6 = fieversion >= 6.0; var Ismoz = Suseragent.indexof ("GeCko ") >-1 &&!iskhtml;

var isMinMoz1 = Sminmoz1_4 = Isminmoz1_5 = false; if (Ismoz) {var remoz = new RegExp ("rv: (//d+//.//d+ (?:/
  /.//d+) ");
  Remoz.test (suseragent);
  ISMINMOZ1 = CompareVersions (regexp["$"], "1.0") >= 0;
  Isminmoz1_4 = CompareVersions (regexp["$"], "1.4") >= 0;
Isminmoz1_5 = CompareVersions (regexp["$"], "1.5") >= 0; var isNS4 =!isie &&!isopera &&!ismoz &&!iskhtml && (Suseragent.indexof ("Mozi Lla ") = = 0) && (navigator.appname =" Netscape ") && (fappversion >= 4.0 && Fappve

Rsion < 5.0);

var isMinNS4 = Isminns4_5 = Isminns4_7 = Isminns4_8 = false;
  if (isNS4) {isMinNS4 = true;
  Isminns4_5 = fappversion >= 4.5;
  isminns4_7 = fappversion >= 4.7;
Isminns4_8 = fappversion >= 4.8; var Iswin = (Navigator.platform = = "Win32") | |
(Navigator.platform = = "Windows"); var Ismac = (Navigator.platform = = "mac68k") | | (Navigator.platform = ="MACPPC") | |

(Navigator.platform = = "Macintosh");

var Isunix = (Navigator.platform = = "X11") &&!iswin &&!ismac;
var IsWin95 = IsWin98 = isWinNT4 = Iswin2k = Iswinme = Iswinxp = false;
var ismac68k = ISMACPPC = false;

var Issunos = isMinSunOS4 = IsMinSunOS5 = Isminsunos5_5 = false;
  if (iswin) {IsWin95 = Suseragent.indexof ("Win95") >-1 | | suseragent.indexof ("Windows)" >-1; IsWin98 = Suseragent.indexof ("Win98") >-1 | |
  Suseragent.indexof ("Windows)" >-1; Iswinme = Suseragent.indexof ("Win 9x 4.90") >-1 | |
  Suseragent.indexof ("Windows ME") >-1; Iswin2k = Suseragent.indexof ("Windows NT 5.0") >-1 | |
  Suseragent.indexof ("Windows C") >-1; ISWINXP = Suseragent.indexof ("Windows NT 5.1") >-1 | |
  Suseragent.indexof ("Windows XP") >-1; IsWinNT4 = Suseragent.indexof ("WinNT") >-1 | | Suseragent.indexof ("Windows NT") >-1 | | Suseragent.indexof ("WinNT4.0"); -1 | |
Suseragent.indexof ("Windows NT 4.0") >-1 && (!iswinme &&!iswin2k &&!iswinxp);
  } if (Ismac) {ismac68k = Suseragent.indexof ("mac_68000") >-1 | | suseragent.indexof ("68K") >-1; ISMACPPC = Suseragent.indexof ("Mac_powerpc") >-1 | | 
Suseragent.indexof ("PPC") >-1;

  } if (Isunix) {Issunos = Suseragent.indexof ("SunOS") >-1; if (Issunos) {var resunos = new RegExp ("SunOS"//d+//.//d+ (?:/
    /.//d+) ");
    Resunos.test (suseragent);
    IsMinSunOS4 = CompareVersions (regexp["$"], "4.0") >= 0;
    IsMinSunOS5 = CompareVersions (regexp["$"], "5.0") >= 0;
  Isminsunos5_5 = CompareVersions (regexp["$"], "5.5") >= 0; }
}

The above is JS event processing, I hope to give you a reference, but also hope that we support the cloud-dwelling community.