In diesem Artikel wird die Verwendung des Hinzufügens und Löschens von Hören in JavaScript beschrieben. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
Event -Listening in JS soll AddEventListener verwenden, um ein Ereignis zu binden. Diese Verwendung ist in JQuery sehr häufig und einfach, aber in der einheimischen JS komplizierter. Hier organisieren wir Tests und Beispiele für verschiedene Methoden des AddEventListener -Ereignisses als Referenz und Lernen.
Als ich vor zwei Tagen als Spieler arbeitete, hatte ich einige Probleme beim Löschen des Monitors und konnte nicht gelöscht werden. Nachdem ich es mir angesehen hatte, stellte ich fest, dass die Parameter vollständig korrespondiert werden müssen. Was bedeutet es, vollständig korrespondiert zu werden? Mit anderen Worten:
Die Codekopie lautet wie folgt: $ ('. Video') [0] .AdDeVentListener ('TimeUpdate', CurrentTimeHandler, True);
Zum Beispiel müssen drei Parameter in diesem Satz übergeben werden, damit er gelöscht werden kann. Warum ist es notwendig? Ja, der schmerzhafte Teil ist hier:
Beim Hinzufügen und Entfernen kann der dritte Parameter ignoriert werden, aber ihre Standardsituation ist zu diesem Zeitpunkt anders! !
Normalerweise ist AddEventListener falsch ...
1. Fügen Sie benutzerdefiniertes Ereignishören hinzu
Die Codekopie lautet wie folgt: var EventHandlesCounter = 1; // Berechnen Sie die Anzahl der hinzugefügten Ereignisanhörungen, 0 wird als reserviertes Bit verwendet
Funktion addEvent (obj, evt, fn) {
if (! fn .__ eventId) {fn .__ eventId = eventHandlesCounter ++;}
if (! obj .__ eventHandles) {obj .__ eventHandles = []; }
if (! obj .__ eventHandles [evt]) {
obj .__ EventHandles [evt] = [];
if (obj ["on"+evt] Instanzfunktion) {{
obj .__ eventHandles [evt] [0] = obj ["on"+evt];
obj ["on"+evt] = HandleEvents;
}
}
obj .__ eventHandles [evt] [fn .__ eventId] = fn;
Funktion HandelsEvent () {
var fns = obj .__ eventHandles [evt];
für (var i = 0; i <fns.length; i ++)
fns [i] .call (this);
}
}
2. Passen Sie das Anhören des Löschens an.
Die Codekopie lautet wie folgt: Funktion DEPEVENT (OBJ, EVT, FN) {
if (! obj .__ eventHandles ||! Obj .__ EventHandles [evt] ||! fn .__ eventId) {
false zurückgeben;
}
if (obj .__ eventHandles [evt] [fn .__ eventId] == fn) {
obj .__ eventHandles löschen [evt] [fn .__ eventId];
}
}
3. korrigieren Sie die obige Methode
Die Codekopie lautet wie folgt: Funktion AddEvent (OBJ, EVT, FN, Usecapture) {
if (obj.addeventListener) {// bevorzugt es, eine W3C -Ereignisregistrierung zu verwenden
obj.addeventListener (evt, fn, !! usecapture);
}anders{
if (! fn .__ eventId) {fn .__ eventId = addEvent .__ EventHandlesCounter ++;}
if (! obj .__ eventHandles) {obj .__ eventHandles = [];}
if (! obj .__ eventHandles [evt]) {
obj .__ EventHandles [evt] = [];
if (obj ["on"+evt]) {
(obj .__ eventHandles [evType] [0] = obj ["on"+evType]) .__ eventId = 0;
}
obj ["on"+evType] = addEvent.execeventHandles;
}
}
}
AddEvent .__ EventHandlesCounter = 1;
addEvent.execeventHandles = function (evt) {
if (! this .__ eventHandles) {return true;}
evt = evt || Fenster.Event;
var fns = this .__ eventHandles [evt.type];
für (var i = 0; i <fns.length; i ++) {
if (fns [i] Instanzfunktion) {
fns [i] .call (this);
}
}
};
Funktion DEPEVENT (OBJ, EVT, FN, Usecapture) {
if (obj.removeventListener) {// Entfernen Sie den Ereignishandler zuerst mit der W3C -Methode
obj.removeventListener (evt, fn, !! usecapture);
}anders {
if (obj .__ eventHandles) {
var fns = obj .__ eventHandles [evt];
if (fns) {fns löschen [fn .__ eventId];}
}
}
4. Standardisieren Sie Ereignisobjekte
Die Codekopie lautet wie folgt: Funktion FixEvent (EVT) {
if (! evt.target) {
evt.target = evt.srcelement;
evt.preventDefault = FixeVent.PreventDefault;
evt.StopPropagation = FixEvent.StopPropagation;
if (evt.type == "mouseover") {
evt.relatedTarget = evt.Fromelement;
} else if (evt.type == "Mausout") {
evt.relatedTarget = evt.toelement;
}
evt.charcode = (evt.type == "keypress")? evt.keycode: 0;
Evt.EventPhase = 2;
evt.timestamp = (new Date ()). GetTime ();
}
EVT zurückgeben;
}
FixEvent.PreventDefault = function () {this.returnValue = false;}
fixeVent.StopPropagation = function () {this.cancelBubble = true;};
Die FixeVent -Funktion wird nicht separat ausgeführt, muss über einen Ereignisobjektparameter verfügen und nur dann ausgeführt, wenn das Ereignis auftritt! Der beste Weg ist es, es in die ExeceventHandles der AddEvent -Funktion zu integrieren.
Kopieren Sie den Code wie folgt: addEvent.execeventHandles = Funktion (EVT) {// Übertragen
if (! this .__ eventHandles) {return true;}
evt = fixeVent (evt || window.event); // standardisieren Sie es hier
var fns = this .__ eventHandles [evt.type];
für (var i = 0; i <fns.length; i ++) {
if (fns [i] Instanzfunktion) {
fns [i] .call (this, evt); // und verwenden Sie es als erster Parameter der Ereignishandlerfunktion
// Auf diese Weise können Sie eine einheitliche Methode verwenden, um auf das Ereignisobjekt innerhalb der Ereignishandlerfunktion}}} zugreifen zu können.
Das obige wird von einem Master geschrieben, und die folgenden Beispiele für tatsächliche Überwachungsereignisse
Kopieren Sie den Code wie folgt: <! DocType html public "-// w3c // dtd html 4.01 transitional // en">
<html>
<kopf>
<title> test6.html </title>
<script type = "text/javaScript">
Funktionstest () {
window.alert ("Sie haben einmal gestimmt");
document.GetElementById ("1"). Ablösung ("Onclick", Test);
}
</script>
</head>
<body>
<Eingabe type = "button" value = "stimmen" id = "1"/>
<script type = "text/javaScript">
document.getElementById ("1"). AttachEvent ("Onclick", Test);
</script>
</body>
</html>
Hier, document.getElementById ("1"). AttafEvent ("Onclick", Test); wird für die dynamische Ereignisbindung verwendet und der Kopiercode wird wie folgt verwendet:
document.getElementById ("1"). Ablösung ("Onclick", Test) storniert die Zeit dynamisch ab, so dass dieses Ereignis nur einmal entsprechend sein kann und beim nächsten Klicken auf diese Schaltfläche beim nächsten Mal kein Effekt erzeugt wird.
Als nächstes wird eine weitere Demonstration eines Tastaturereignisses, das rechtzeitig überwacht wird, um festzustellen, ob die Eingabe eine Zahl ist. Wenn es sich nicht um eine Zahl handelt, wird es dynamisch aufgefordert und lehnt dann ihre Eingabe ab.
Kopieren Sie den Code wie folgt: <! DocType html public "-// w3c // dtd html 4.01 transitional // en">
<html>
<kopf>
<title> test7.html </title>
<script type = "text/javaScript">
Funktionstest (Ereignis) {
// Jedes Mal, wenn der Benutzer auf eine Taste drückt, wird er feststellen, ob es sich um eine Nummer handelt
if (Event.KeyCode <48 || event.KeyCode> 57) {
window.alert ("Sie geben keine Zahl ein");
false zurückgeben;
}
}
</script>
</head>
<body>
<input type = "text" OnKeypress = "Rückgabe -Test (Ereignis);" /> Bitte geben Sie eine Nummer ein
</body>
</html>
Das Ereignis hier ist ein Ereignisobjekt, das viele Informationen zurückgeben kann. Weitere Informationen finden Sie in den entsprechenden Dokumenten.
Ergänzung: Kompatibilität bei der Ereignisüberwachung
1. IE verwendet die Methode für die Anhang-/Ablösung, um Ereignishörer hinzuzufügen und zu löschen. W3C verwendet die Methode AddEventListener/REMEDEVENTLISTENER.
2. IE verwendet eine OneSvent -Benennungsmethode für seine Ereignisse, während W3C die Namensmethode für den Ereignis ist.
3. Der IE -Ereignishörer verwendet ein globales Ereignisobjekt, während W3C das Ereignisobjekt als Parameter an den Hörer übergibt.
4. Um zu vermeiden, dass das Standard -Ereignisverhalten ausgelöst wird, besteht der IE -Ansatz darin, die Programmierer zu verpflichten, den Eigenschaftswert des Rückkehrwerters im Ereignisobjekt auf False festzulegen, während der Ansatz von W3C die Voraussetzung für die Verhinderung ausführt.
5. IE bietet keine Unterstützung für die Ereigniserfassungsphase.
6. Um die Ereignisbereitstellung zu stoppen, besteht der Ansatz von IE, den Abistriktieren des Ereignisobjekts auf True festzulegen, während der Ansatz von W3C die Ausführungsstopp -Propagation -Methode festlegen soll.
7. IE nennt den Ereignishörer als unabhängige Funktion, während er in W3C als Objektmethode bezeichnet wird. Dies bedeutet, dass in IE das Keyword im Ereignishörer nicht auf das Ereignisvorkommensobjekt, sondern ein nutzloses globales Objekt (Fensterobjekt) verweist.
8. IE hat Speicherleckprobleme bei der Verwendung von Ereignishörern. Wenn Sie im IE -Browser einen Ereignishörer für ein Element erstellen und dieses Element im Hörer verwenden möchten, werden der vom Hörer besetzte Speicherplatz und die zugehörigen DOM -Knoten nicht veröffentlicht, bevor der Benutzer eine andere Seite betritt.
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.