Lassen Sie uns das Ereignisobjekt in js genauer verstehen

Wir wissen, dass die in JS am häufigsten verwendeten Ereignisse folgende sind:

• Seitenereignis: Laden;
• Fokusereignisse: Fokus, Unschärfe;
• Mausereignisse: Klicken, Mouseout, Mouseover, Mausbewegung usw.;
• Tastaturereignisse: Taste gedrückt, Taste los, Tastendruck;
• Formularereignisse: Zurücksetzen, Senden;
• Inhaltsänderungsereignisse: Änderung, Eingabe

Was genau ist also das „Ereignisobjekt“ in JS?

Zunächst einmal: Was ist ein Ereignis?

Zunächst wird JS verwendet, um einige dynamische Vorgänge zu implementieren. Benutzer möchten manchmal einige Funktionen implementieren, z. B. das Senden eines Formulars, Klicken mit der Maus usw., was das Auslösen dieses Ereignisses im Browser erfordert. Dann erkennt (oder erfasst) der Browser das Verhalten des Benutzers und reagiert auf das Ereignis und verarbeitet es. Dies wird als Ereignis bezeichnet.

Was ist also der Grund für die Generierung von Ereignisobjekten?

In den meisten Fällen ist das Auslösen eines Ereignisses eine Aktion, die der Benutzer ausführen möchte. Mit anderen Worten: Wir können nicht sicher sein, wann der Benutzer das Ereignis auslöst. Darüber hinaus können wir aufgrund des Ausbreitungsmechanismus des Ereignisses nicht einmal sicher sein, an welchem ​​Knoten das Ereignis ausgelöst wird. Das ist ein Problem.

Um dieses Problem zu lösen, ruft das System nach dem Auftreten des Ereignisses den Ereignishandler (einen Codeabschnitt) auf, den wir zur Lösung des Problems geschrieben haben.

Dies führt zu der Frage: Was ist ein Ereignisobjekt?

Beim Aufruf des Handlers kapselt das System alle Informationen zum Ereignis in ein Objekt und übergibt es als Parameter an die Abhörfunktion (Ereignishandler). Daher wird dieses Objekt als Ereignisobjekt bezeichnet.

Je nach Ereignistyp sind auch die im Ereignisobjekt enthaltenen Informationen unterschiedlich; bei einem Klickereignis enthält es beispielsweise die horizontalen und vertikalen Koordinaten des Mausklicks, bei einem Tastaturereignis den Wert der Tastaturtaste usw.

<Text>
 <div id="div">
 <p>pppp</p>
 </div>
 <Eingabetyp="text" Wert="" ID="i">
</body>
<Skript>
var d = document.getElementById('div');
//Mausereignis d.addEventListener('click',function(e){
 konsole.log(e);
});
var i = document.getElementById('i');
//Tastaturereignis i.addEventListener('keydown',k);
Funktion k(e){
 konsole.log(e);
}
</Skript>

Nachdem wir nun die Bedeutung von Ereignisobjekten verstehen, schauen wir uns die Eigenschaften und Methoden von Ereignisobjekten an.

(1) Allgemeine Merkmale:

event.bubbles: Gibt einen Booleschen Wert zurück, der angibt, ob das aktuelle Ereignis sprudeln wird;

event.eventPhase: Gibt einen Integer-Wert zurück, der die Position des Ereignisstroms in der Ausbreitungsphase angibt

0: Das Ereignis findet derzeit nicht statt.
1: Das Ereignis befindet sich derzeit in der Erfassungsphase.
2: Das Ereignis erreicht den Zielknoten.
3: Die Veranstaltung befindet sich in der Brodelphase.

event.type: Gibt eine Zeichenfolge zurück, die den Ereignistyp angibt (Groß-/Kleinschreibung beachten).

event.timeStamp: Gibt einen Zeitstempel in Millisekunden zurück, der den Zeitpunkt angibt, zu dem das Ereignis aufgetreten ist.

clientX, clientY: Holen Sie sich die X- und Y-Koordinaten des Mausereignisses

Event-Objekt

(2) Eigenschaften des Veranstaltungsvertreters/Delegierten:

event.target: Ein Verweis auf den Ereignisauslöser, der den Knoten zurückgibt, an dem das auslösende Ereignis aufgetreten ist. (Wichtige Punkte)

event.currentTarget: Gibt den Knoten zurück, an dem sich das Ereignis derzeit befindet, d. h. den Knoten, an den die ausgeführte Abhörfunktion gebunden ist. (Verstehe es einfach)

 var d = document.getElementById('d');
 d.onclick = Funktion(e){
 //Gibt den Ereignisknoten zurück console.log(e.currentTarget);
 //Zurück zum Triggerknoten console.log(e.target);
 }

Die Bedeutung des Ereignisproxys (Ereignisdelegierung): Da sich das Ereignis in der Sprudelphase nach oben zum übergeordneten Knoten ausbreitet, kann die Abhörfunktion des untergeordneten Knotens auf dem übergeordneten Knoten definiert werden, und die Abhörfunktion des übergeordneten Knotens verarbeitet die Ereignisse mehrerer untergeordneter Elemente einheitlich. Diese Methode wird als Ereignisproxy, auch Ereignisproxy oder Ereignisdelegation bezeichnet.

<Kopf>
 <Titel></Titel>
 <meta charset="UTF-8">
 <Stil>
 div{padding: 40px}
 #div3{Breite: 300px;Höhe: 300px;Rand: 1px durchgehend rot;}
 #div2{Breite: 200px;Höhe: 200px;Rand: 1px durchgehend rot;}
 #div1{Breite: 100px;Höhe: 100px;Rand: 1px durchgehend rot}
 </Stil>
</Kopf>
<Text>
 <div id="div3">div3
 <div id="div2">div2
  <div id="div1">div1</div>
 </div>
 </div>
</body>
<Skript>
 var d = document.getElementById('div3');
 d.onclick = Funktion(e){
 e.target.style.background = "rot";
 }
</Skript>

Gemäß dem obigen Code sind die Positionen der drei Divs ungefähr wie folgt: Klicken Sie auf jedes Div, und das gesamte Div wird rot. Hauptsächlich gibt e.target den durch den Klick ausgelösten Knoten zurück.

(3) Methode zum Unterbinden des Standardverhaltens des Browsers und zur Verhinderung der Ereignisausbreitung event.preventDefault(): Diese Methode verhindert, dass der Browser das Standardverhalten des aktuellen Ereignisses ausführt. Beispielsweise springt der Browser nach dem Anklicken eines Links auf die angegebene Seite; oder nach dem Drücken der Leertaste wird die Seite eine bestimmte Strecke nach unten gescrollt. event.stopPropagation(): Diese Methode stoppt die weitere Ausbreitung des Ereignisses in der DOM-Struktur und verhindert das Auslösen von Abhörfunktionen, die auf anderen Knoten definiert sind.

<Text>
 <div id="div2">2
 <div id="div1">1
  <a id="a" href="Baidu 2">Mein heller Mond riecht immer mehr, ich möchte ihn riechen</a>
 </div>
 </div>
</body>
<Skript>
 var d2 = document.getElementById('div2');
 var d1 = document.getElementById('div1');
 var a = document.getElementById('a');
 d2.onclick = Funktion(e){
 Alarm('d2');
 }
 d1.onclick = Funktion(e){
 Alarm('d1');
 }
 a.onclick = Funktion(e){
 //Ereignisausbreitung stoppen e.stopPropagation();
 Alarm('a');
 //Standardverhalten des Browsers verhindern e.preventDefault();
 }
</Skript> 

Verwenden Sie das Ereignisobjekt, um ein einfaches Beispiel zu implementieren: ein Div, das der Maus folgt (durch Ändern des XY-Werts des Ereignisobjekts).

<Text>
 <div id="div2">2
 <div id="div1">1
  <a id="a" href="Baidu 2">Mein heller Mond riecht immer mehr, ich möchte ihn riechen</a>
 </div>
 </div>
</body>
<Skript>
 var d2 = document.getElementById('div2');
 var d1 = document.getElementById('div1');
 var a = document.getElementById('a');
 d2.onclick = Funktion(e){
 Alarm('d2');
 }
 d1.onclick = Funktion(e){
 Alarm('d1');
 }
 a.onclick = Funktion(e){
 //Ereignisausbreitung stoppen e.stopPropagation();
 Alarm('a');
 //Standardverhalten des Browsers verhindern e.preventDefault();
 }
</Skript> 

Vor dem Klicken (keine Bewegung)

Nach dem Klicken (Maus folgen)

Zusammenfassen

Dies ist das Ende dieses Artikels über Ereignisobjekte in js. Weitere relevante js-Ereignisobjekte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!