1. Bubble Events
Es gibt zwei Arten von Ereignismodellen für Browser: Capture -Ereignisse und Blasenereignisse. Da der IE keine Ereignisse erfasst, verwendet Folgendes hauptsächlich Blasenereignisse als Erklärung.
(genannte Blase) Bubble Typ bezieht sich auf das spezifischste Ereignis des am wenigsten spezifischen Ereignisses, das einzeln ausgelöst wird.
Die Codekopie lautet wie folgt:
<body onclick = "add ('body <br>')">
<div onclick = "add ('div <br>')">
<ponclick = "add ('p <br>')"> Klicken Sie auf mich </p>
</div>
</body>
<div id = "display">
</div>
<script type = "text/javaScript">
Funktion add (stext) {
var ulo = document.getElementById ("display");
ulo.innerhtml += stext;
}
</script>
Die obigen drei Funktionen haben die Onclick -Funktion hinzugefügt. Die drei Funktionen nach dem eigenständigen P-Element wurden abgefeuert. Das P -Element wird zuerst ausgeführt, dann wird das Div ausgeführt und schließlich wird der Körper ausgeführt.
Hier erinnert sich hier eine Erinnerung an das Capture -Ereignis, und seine Reihenfolge ist genau das Gegenteil des Blasenereignisses.
2. Ereignisüberwachung
Ein Ereignis erfordert eine Funktion, um zu antworten. Diese Art von Funktion wird normalerweise als Ereignishandler bezeichnet. Aus einer anderen Perspektive hören diese Funktionen in Echtzeit zu, unabhängig davon, ob ein Ereignis auftritt, normalerweise als Ereignishörer. Die Ereignishörfunktion ist für verschiedene Browser ganz anders.
ich. Allgemeine Hörmethode, wie die Verwendung der Onclick -Methode, unterstützt fast jedes Tag diese Methode. Und die Browserkompatibilität ist sehr hoch
Berücksichtigung von Verhalten, Ereignistrennung.
Überwachen Sie im Allgemeinen die folgenden Methoden anhand der folgenden Methoden
Die Codekopie lautet wie folgt:
<body>
<div id = "me"> klicken Sie auf </div>
<script type = "text/javaScript">
var opp = document.getElementById ("me"); // Ereignis gefunden
opp.onclick = function () {// Ereignisfunktion festlegen
Alarm ("Ich wurde geklickt!")
}
</script>
</body>
Beide oben eingeführten Methoden sind sehr bequem und werden von Everbright -Entwicklern beim Erstellen und Umgang mit kleinen Funktionen geliebt. Aber für das gleiche Ereignis. Sie können nur eine Funktion hinzufügen, z. B. die von p markierte Onclick -Funktion. Beide Methoden können nur eine Funktion haben. Daher hat der IE seine eigene Lösung, Kollegen und Standard -DOM eine andere Methode.
ii. Überwachungsmethode in IE
Im Morgenbrowser verfügt jedes Element mit zwei Methoden, um das Hören der Zeit zu bewältigen.
sind attehattung () bzw. septachenevt ().
Wie Sie aus ihren Funktionsnamen erkennen können, ist AtTeNeNevt () eine Funktion, mit der Ereignisverarbeitung zu einem Element hinzugefügt wird, während detaachEvent () verwendet wird, um die Hörfunktion auf dem Element zu löschen. Ihre Syntax ist wie folgt:
[Objekt] .attacheAvent ("Enevt_handler", "fnhandler");
[Objekt] .DetACHEvent ("Enevt_handler", "fnhandler");
Unter ihnen repräsentiert Enevt_Handler häufig verwendete Onclick, Onload, Onmouseover usw.
FNHandler ist der Name der Hörerfunktion.
Im vorherigen Abschnitt können Sie die Methode CatteleVent () verwenden, anstatt die Hörfunktion hinzuzufügen. Wenn Sie darauf klicken, können Sie detaachEvent () die Hörfunktion löschen, damit sie nach dem nächsten Klick nicht ausgeführt wird.
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
Funktion fnclick () {
Alarm ("Ich wurde geklickt!");
op.detACHEvent ("Onclick", "fnclick");
}
var op;
window.onload = function () {
op = document.getElementById ("oop"); // das Objekt finden
Op.attachevent ("Onclick", "fnclick"); // Fügen Sie eine Hörerfunktion hinzu
}
</script>
<div>
<p id = "oop">
</p>
</div>
III. Fügen Sie mehrere Hörereignisse hinzu (dh)
Die Codekopie lautet wie folgt:
<script Language = "JavaScript">
Funktion fnclick1 () {
alarm ("Ich wurde von fnclick1 geklickt");
}
Funktion fnclick2 () {
alarm ("Ich wurde von fnclick2" geklickt ");
//op.detachevent("onclick",fnclick1); // die Listener -Funktion 1 löschen 1
}
var op;
window.onload = function () {
op = document.getElementById ("myp"); // das Objekt finden
Op.attachevent ("Onclick", FNCLICK1); // Hörerfunktion 1 hinzufügen 1
Op.attachEvent ("Onclick", fnclick2); // Fügen Sie die Hörerfunktion 2 hinzu 2
}
</script>
</head>
<body>
<div>
<p id = "myp"> klicken Sie auf mich </p>
</div>
3. Standard -DOM -Ereignisüberwachung
Mit den beiden IE -Methoden verwendet das Standard -DOM auch zwei Methoden, um die Listener -Funktion hinzuzufügen und zu löschen. d.h. addEventListener () und remyEventListener ()
Im Gegensatz zu IE akzeptieren diese beiden Funktionen 3 Parameter, nämlich den Namen des Ereignisses, den Namen der zugewiesenen Funktion und ob es für die Blasenstufe oder die Erfassungsstufe verwendet wird. Die Parameter der Erfassungsstufe sind wahr, und die Parameter der Blasenstufe sind falsch. Die Syntax ist wie folgt:
Die Codekopie lautet wie folgt:
[Objekt] .AdDeVentListener ("event_name", fnhandler, bcapture);
[Objekt] .RemoveEventListener ("event_name", fnhandler, bcapture);
Die Verwendungsmethoden dieser beiden Funktionen sind im Grunde genommen dem IE ähnlich, aber Sie sollten beachten, dass der Name von Event_Name "Click", "Mouseover" usw. ist, anstatt "Onclick" und "Onmouseover" in IE.
Darüber hinaus ist der dritte Parameter -BCapture in der sprudelnden Stufe normalerweise auf False eingestellt.
Standard -DOM -Event -Hörmethode:
Die Codekopie lautet wie folgt:
<script Language = "JavaScript">
Funktion fnclick1 () {
alarm ("Ich wurde geklickt 1");
op.removeEventListener ("Click", fnclick1, false);
}
Funktion fnclick2 () {
alarm ("Ich wurde geklickt 2");
}
window.onload = function () {
op = document.getElementById ("myp");
op.addeventListener ("click", fnclick1, false);
op.addeventListener ("click", fnclick2, false);
}
</script>
<div>
<p id = "myp"> klicken Sie auf mich </p>
</div>
Sie können die spezifische Ausführungsreihenfolge testen.
Das obige dreht sich alles um diesen Artikel, ich hoffe es gefällt euch.