1. plattformübergreifende Ereignisse
Was ist ein plattformübergreifendes Ereignis? Das heißt, das gleiche Ereignis wird auf verschiedenen Browsern ausgeführt, und die verwendeten Methoden sind unterschiedlich.
Was ist ein EventUtil -Objekt? Was ist ihre Funktion? Das heißt, ein Container, der alle Funktionen im Zusammenhang mit Ereignissen kombiniert, um die Verwaltung von Ereignisobjekten zu erleichtern, und es hat keine Attribute. Es befasst sich hauptsächlich mit dem Einlauf zwischen DOM-Ereignissen und IE-Events, um sie so ähnlich wie möglich zu gestalten.
Werfen wir einen Blick auf die Objekteigenschaften und -methoden zwischen DOM und IE zu vergleichen (es gibt nur die unterschiedlichen Eigenschaften und Methoden zwischen den beiden). Es gibt fünf Hauptpunkte:
DOM -Eigenschaften und -Methoden dh Eigenschaften und Methoden
Charcode KeyCode
PREVETDEFAULT ReturnValue = False
RelatedTarget Fromobj | toobj
STOPPROPATION CancelBuble = True
Ziel SRCOBJ
Schauen wir es uns mit einer kleinen Demo an, die das plattformübergreifende Kompatibilitätsproblem von Ereignissen lösen kann:
<html> <Head> <titels> eventUtil </title> <script EventType = "text/javaScript"> var eventil = {// Ereigniser addlistener: function (obj, eventType, fn) {if (obj.addeventListener) {obj.addeventListerner (eventType, fnentlisten); } else if (obj.attachEvent) {obj.attachEvent ('on' + eventType, fn); } else {obj ['on' + eventType] = fn; }}. Fenster.Event; // Ereignis zurückgeben? Ereignis: window.event; }. event.srcobj; }, PreventDefault: function (Ereignis) {if (Event.PreventDefault) {Event.PreventDefault (); } else {event.returnValue = false; }}, removelistener: function (obj, eventType, fn) {if (obj.removeventListener) {obj.removeEventListener (eventType, fn, false); } else if (obj.deattachEvent) {obj.detachevent (eventType, fn); } else {obj ['on' + eventType] = null; }}, stopPropagation: function (event) {if (event.StopPropagation) {event.stopPropagation (); } else {event.cancelBubble = true; }}}; </script> </head> <body> <inputtype = "button" value = "klicken me" "id =" btn "/> <p> Ereignis </p> <a> Hallo Word! var target = eventUtil.gettarget (Ereignis); alarm ("Mein Name ist Kock"); Alert (Event.EventType); Alarm (Ziel); EventUtil.StopPropagation (Ereignis); } Funktion getBodyListen (Ereignis) {alert ("Klicken Sie auf Body"); } function getLinkListen (Ereignis) {alert ("Standard -Ereignis verhindern"); var event = eventUtil.getEvent (Ereignis); EventUtil.PreventDefault (Ereignis); } window.onload = function () {var btn = document.getObjbyId ("btn"); var link = document.getObjsByTagName ("a") [0]; eventUtil.addListener (btn, "click", addBtnListen); EventUtil.AddListener (Dokument.body, "Click", getBodyListen); eventUtil.addListener (Link, "klicken", getLinkListen); } </script> </body> </html>Die obige Methode kann das plattformübergreifende Problem von Ereignissen lösen. Schauen wir uns als nächstes die Eigenschaften von Charcode an.
Definieren Sie zunächst eine neue Methode für EventUtil, formatevent, einen Parameter, dh das Ereignisobjekt.
eventUtil.formatevent = function (event) {if (isie && iswin) --- Erkennung von Browserproblemen {event.charcode = (event.type == "keypress")? event.keycode: 0; Event.EventPhase = 2;-Zeigt die sprudelnde Phase an, dh nur die sprudelnde Phase} Return Event;}2. Über das sprudelnde Ziel und das Stromtarget
Ziel befindet sich in der Zielphase des Ereignisstroms; CurrentTarget befindet sich in der Erfassung, Ziel- und Blasenstufe des Ereignisstroms. Nur wenn sich der Ereignisstrom in der Zielstufe befindet, sind die beiden Zeiger gleich, und wenn er sich in den Erfassungs- und Blasenstufen befindet, zeigt das Ziel auf das angeklickte Objekt und das aktuelle Target auf den übergeordneten des aktuellen Ereignisses.
<div id = "äußere" style = "Hintergrund:#099"> <p> Ich bin der Zieldiv </p> ---- Klicken Sie auf diesen Teil, Ausgabe: e.target.tagname: p || E.CurrentTarget.tagname: div <p id = "Inner" style = "Hintergrund:#9c0"> Ich bin das Ziel P </p> --- Klicken Sie auf diesen Teil, Ausgabe: e.target.tagname: P || e.currentTarget.tagname: div <br> --- Klicken Sie auf diesen Teil, Ausgabe: e.target.tagname: div || E.CurrentTarget.tagname: div </div> // Sehen Sie sich die zweite Änderungsspalte an: <div id = "äußere" style = "Hintergrund:#099"> <div> Ich bin der Zieldiv </div> ---- Klicken Sie auf diesen Teil, Ausgabe: e.target.tagname: div || E.CurrentTarget.tagname: div <p id = "Inner" style = "Hintergrund:#9c0"> Ich bin das Ziel P </p> --- Klicken Sie auf diesen Teil, Ausgabe: e.target.tagname: P || e.currentTarget.tagname: div <br> --- Klicken Sie auf diesen Teil, Ausgabe: e.target.tagname: div || e.currentTarget.tagname: div </div>
Funktion getObj (id) {return document.getElementById (id); } function addEvent (OBJ, Ereignis, fn) {if (window.attachEvent) {obj.attachEvent ("on" + Ereignis, fn); } else if (window.addeventListener) {obj.addeventListener (Ereignis, fn, false); }} Funktionstest (e) {alert ("e.target.tagname:" + e.target } var outer = getObj ("äußere"); var inner = getObj ("inner"); // AddEvent (innerlich, "klicken", test); AddEvent (äußere, "klicken", test);3. Der Unterschied zwischen IE und DOM
Domie
Holen Sie sich das Zielereignis.target event.srcelement
Holen Sie sich den Zeichencode Event.charcode event.keycode
Blockieren Sie das Standardverhaltensereignis.
Bubble Event.StopPropagation () event.cancelBubble = true
In Bezug auf das Blockieren des Standardverhaltens können Sie beispielsweise, wenn der Benutzer mit der rechten Maustaste auf die Maus klickt. Wenn Sie nicht möchten, dass das Menü auftaucht, können Sie das Blockieren von Standardverhalten verwenden:
document.body.oncontextMenu = Funktion (Ereignis) {if (isie) {var oevent = window.event; oevent.ReturnValue = false; // Es kann auch direkt falsch zurückgegeben werden; Verhindern Sie das Standardverhalten} else {oevent.preventDefault (); }}4. Mausereignis
<p> Verwenden Sie Ihre Maus, um auf das rote Quadrat zu klicken und auf das rote Quadrat zu klicken. id="txt1" rows="5" cols="45"></textarea></p><!--Detection of keyboard events--><p><input type="text" id="textbox" onkeydown="handle(event)" onkeypress="handle(event)" onkeyup="handle(event)" ></p><p><textarea id="txt2" rows="10" cols = "45"> </textArea> </p>
Die JS -Datei lautet wie folgt:
Funktion handleEvent (Ereignis) {var otext = document.getElementById ('txt1'); otext.Value+= "/n"+Event.type; otext.Value+= "/n Ziel ist"+(Ereignis.srcelement || event.target) .id; otext.Value+= "/n at ("+event.clientX+","+event.clienty+") im Client"; otext.Value+= "/n Button Down ist"+Ereignis.button; var arrkeys = []; otext.Value+= "/n RelatedTarget ist"+event.relatedTarget.tagname; //event.relatedTarget.tagname kann die Quelle und Quelle des Maus} -Funktionshandels (Ereignis) {var otext2 = document.getElementById ('txt2') bestimmen; otext2.Value+= "/n"+Ereignis.typ; var arrkeys = []; if (event.Shiftkey) {arrakeys.push ("Shift");} if (event.ctrlkey) {arrkeys.push ("Strg");} if (Event.Altkey) {arrakeys.push ("Alt");} otext2.Value+= "/n keydown is"+arrkeys;Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.