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 | Schlüsselcode |
| Verhinderungdefault | returnValue = false |
| Verwandte Target | vonbj | 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) {event.charcode = (event.type == "keypress")? event.Keycode: 0; Event.EventPhase = 2;- Zeigt die sprudelnde Phase an, dh nur die sprudelnde Phase} Return Event;}Zwei: Über das Ziel und das Stromtarget im Sprudeln
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);Drei: Der Unterschied zwischen IE und DOM
| Dom | Dh | |
| Das Ziel erhalten | Event.Target | event.srcelement |
| Holen Sie sich Zeichencode | Event.CharCode | Event.KeyCode |
| Blockieren Sie das Standardverhalten | Event.PrevetDefault () | Ereignis.ReturnValue = false |
| Blase | 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 (); }}Vier: 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;Die obige Zusammenfassung der am meisten übersehenen Vorfälle in JS ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.