Ereignisse im Browser existieren alle in Form von Objekten. In ähnlicher Weise gibt es auch einen Unterschied beim Erhalten von Ereignisobjekten zwischen dem IE -Browser und den Standard -DOM -Browsern. Im IE -Browser ist das Ereignisobjekt ein Attributereignis des Windows -Objekts. Die folgende Methode wird normalerweise verwendet, um darauf zuzugreifen.
Die Codekopie lautet wie folgt:
op.onclick = function () {
var oevent = window.event;
}
Obwohl es sich um eine Fensterobjekteigenschaft handelt, kann auf das Ereignisobjekt nur zugegriffen werden, wenn das Ereignis auftritt. Nachdem alle Ereignisbearbeitungsfunktionen ausgeführt werden, verschwindet das Objekt.
Das Standard -DOM sieht vor, dass Ereignisobjekte als eindeutige Parameter an Ereignisverarbeitungsfunktionen übergeben werden müssen. Zugriff auf Ereignisobjekte in Firefox -Browsern wird normalerweise normalerweise als Parameter verwendet, und der Code lautet wie folgt:
Die Codekopie lautet wie folgt:
op.onclick = function (oevent) {
}
Daher wird normalerweise die folgende Methode verwendet, um mit beiden Browsern kompatibel zu sein
Die Codekopie lautet wie folgt:
op.onclick = function (oevent) {
if (window.event) oevent = window.event;
}
Nach dem Erhalt des Ereignisobjekts kann der Browser verschiedene Ereignisse über seine Reihe von Eigenschaften und Methoden wie Mausereignissen, Tastaturereignisse und Browser -Ereignisse verarbeiten. Warten
Im Folgenden sind allgemeine Eigenschaften und Methoden aufgeführt:
Aus dem obigen Punkt können wir sehen, dass die beiden Arten von Browsern immer noch einige Ähnlichkeiten haben. Zum Beispiel ist das Typattribut mit verschiedenen Browsern kompatibel. Es zeigt die Art des Ereignisses an, um Werte wie "Click" und "Mousemove" abzurufen und zurückzugeben.
Dies ist sehr nützlich, um mehrere Arten von Ereignissen in derselben Funktion zu behandeln.
Wie folgt: Die gleiche Funktion übernimmt mehrere Ereignisse.
Die Codekopie lautet wie folgt:
<script Language = "JavaScript">
Funktionshandle (Oevent) {
var document = document.getElementById ("display");
if (window.event) oevent = window.event; // Kompatibilität umgehen und das Objekt erhalten
if (oevent.type == "click")
disp.innerhtml += "Sie haben auf mich geklickt!";
sonst wenn (oevent.type == "Mausover")
disp.innerhtml += "Sie wechseln zu meiner";
}
window.onload = function () {
var op = document.getElementById ("Box");
op.onclick = Handle;
op.onmouseover = Handle;
}
</script>
<div>
<div id = "box"> </div>
<p id = "Anzeige"> Klicken Sie auf mich </p>
</div>
Der obige Code fügt dem Div von ID = "Box" zwei Ereignisantwortfunktionen hinzu, und diese beiden Ereignisse sind dieselbe Funktion.
Betrachten Sie zuerst in dieser Funktion das Ereignisobjektkompatibel und verwenden Sie dann die Typ -Attributdiskette zum Namen des Ereignisses.
Beim Erkennen der drei Tasten von Verschiebung, Alt und Strg sind die Methoden, die von den beiden Browsertypen verwendet werden, genau gleich, beide haben die drei Attribute von ShiftKey, Altkey und Strlkey.
Der Code ist wie folgt:
Die Codekopie lautet wie folgt:
var bShift = oevent.shiftkey;
var balt = oevent.altkey;
var bctrl = oevent.ctrlkey;
Bei der Erlangung von Mauszeigern sind die von beiden Browsertypen verwendeten Methoden gleich, die beide Clientx, Clienty, Screenx und Screeny umfassen.
Unter diesen stellen Clientx und Clienty den Standort der Maus im Kundenbereich dar und enthalten nicht die Statusleiste des Browsers, die Menüleiste usw.
Der Code ist wie folgt:
Die Codekopie lautet wie folgt:
var iclientX = oevent.clientX;
var iclienty = oevent.clienty;
ScreenX und Screeny beziehen sich auf die Position der Maus auf dem gesamten Computerbildschirm, und der Code ist
Die Codekopie lautet wie folgt:
var iscreenx = oevent.screenx;
var iscreeny = oevent.screeny;
Oft möchten Entwickler wissen, dass das Ereignis durch dieses Objekt ausgelöst wird, dh das Ziel des Ereignisses.
Unter der Annahme, dass das <p> -Element eine Onclick -Ereignis -Handler -Funktion zuweist, wird <p> das Ziel betrachtet, wenn das Klickereignis ausgelöst wird.
Im IE -Browser ist das Ziel in der Srcelement -Eigenschaft des Ereignisobjekts enthalten. Der Code ist wie folgt
Die Codekopie lautet wie folgt: var otarget = oevent.srcelement;
Im Standard -DOM -Browser ist das Ziel im Zielattribut enthalten, der Code ist wie folgt
Die Codekopie lautet wie folgt: var otarget = oevent.target;
Holen Sie sich das Ziel des Ereignisses
Die Codekopie lautet wie folgt:
<script Language = "JavaScript">
Funktionshandle (Oevent) {
var document = document.getElementById ("display");
if (window.event) oevent = window.event; // Kompatibilität umgehen und das Objekt erhalten
var otarget;
if (oevent.srcelement) // Kompatibilität umgehen und Ereignisse abrufen
otarget = oevent.srcelement;
anders
otarget = oevent.target;
disp.innerHtml + = "Elementname:" + otarget.tagname + "<br>" + "Elementinhalt:" + otarget.textContent + "<br>"
+ "Knoten unmittelbar folgt:" + otarget.textContent + "<br>"
;
}
window.onload = function () {
var op = document.getElementById ("Box");
op.onclick = Handle;
}
</script>
<div>
<div id = "box">
Boxinhalt
</div>
<p id = "display"> </p>
</div>
(Supplement) Eigenschaften des Elementobjekts http://www.w3school.com.cn/xmldom/dom_element.asp.asp
(Supplement) Methoden des Elementobjekts http://www.w3school.com.cn/xmldom/dom_element.asp.asp
Da das Ziel des Ereignisses in zwei Arten von Browsern unterschiedlich ist, muss der Code die Kompatibilität sicherstellen. Die übliche Praxis besteht darin, das Objekt direkt als Bedingung der IF -Anweisung zu verwenden. Der Code ist wie folgt
Die Codekopie lautet wie folgt:
if (oevent.srcelement)
otarget = oevent.srcelement;
anders
otarget = oevent.target;
Diese Methode wird auch häufig in anderen Eigenschaften verwendet.