DOM
Veranstaltungen

Parameter

Bemerkungen

Einführung

Definition:

Bei der Berechnung ist ein Ereignis eine Aktion oder ein Vorkommnis, das von Software erkannt wird und von der Software verarbeitet werden kann. Computerereignisse können vom System, vom Benutzer oder auf andere Weise generiert oder ausgelöst werden. Definition Quelle

HTML-Ereignisse sind "Dinge", die mit HTML-Elementen passieren. JavaScript kann auf diese Ereignisse "reagieren". über Event Listeners . Darüber hinaus können benutzerdefinierte Ereignisse mit dispatchEvent ausgelöst werden. Dies ist jedoch nur eine Einführung, also los geht's!

Grundlegender Ereignis-Listener

Zum Abhören von Ereignissen rufen Sie target.addEventListener(type, listener);

function loadImage() {
  console.log('image code here!');
}
var myButton = document.querySelector('#my-button');
myButton.addEventListener('click', loadImage);

Dadurch wird loadImage jedes Mal ausgelöst, wenn auf my-button geklickt wird.

Ereignis-Listener können an jeden Knoten in der DOM-Struktur angehängt werden. Um eine vollständige Liste aller Ereignisse anzuzeigen, die im Browser nativ ausgelöst wurden: Klicken Sie hier , um die vollständige Ereignisliste anzuzeigen

Ereignis-Listener entfernen

Die removeEventListener () -Methode entfernt Ereignishandler, die mit der addEventListener () -Methode verknüpft wurden:

element.removeEventListener("mousemove", myFunction);

Alles (eventname, function und options) im removeEventListener muss mit dem Satz übereinstimmen, wenn der Ereignis-Listener zum Element hinzugefügt wird.

.bind mit removeListener

Durch die Verwendung von .bind für die Funktion beim Hinzufügen eines Ereignis-Listeners wird das Entfernen der Funktion verhindert. Der eventListener kann tatsächlich entfernt werden:

function onEvent() {
   console.log(this.name);
}

var bindingOnEvent = onEvent.bind(this);

document.addEventListener('click', bindingOnEvent);

...

document.removeEventListener('click', bindingOnEvent);

Hören Sie sich ein Ereignis nur einmal an

Bis once Option weithin unterstützt wird, müssen wir manuell die auch Zuhörer entfernen , sobald das Ereignis zum ersten Mal ausgelöst wird.

Dieser kleine Helfer hilft uns dabei:

Object.prototype.listenOnce = Object.prototype.listenOnce ||
  function listenOnce(eventName, eventHandler, options) {
      var target = this;
      target.addEventListener(eventName, function(e) {
          eventHandler(e);
          target.removeEventListener(eventName, eventHandler, options);
      }, options);
  }

var target = document.querySelector('#parent');
target.listenOnce("click", clickFunction, false);

* Es ist nicht empfehlenswert, dem Object-Prototyp Funktionen zuzuweisen. Daher können Sie die erste Zeile dieses Codes entfernen und ihm als ersten Parameter ein Ziel hinzufügen.

Warten auf das Laden des Dokuments

Eines der am häufigsten verwendeten Ereignisse ist das Warten auf das Laden des Dokuments, einschließlich Skriptdateien und Bilder. load Ladeereignis auf document verwendet.

document.addEventListener('load', function() {
   console.log("Everything has now loaded!");
});

Manchmal versuchen Sie, auf ein DOM-Objekt zuzugreifen, bevor es geladen wird, wodurch Nullzeiger verursacht werden. Diese sind wirklich schwer zu debuggen. Um dies zu vermeiden, verwenden DOMContentLoaded stattdessen das DOMContentLoaded Ereignis des document . DOMContentLoaded stellt sicher, dass der HTML-Inhalt geladen und initialisiert wurde, ohne auf andere externe Ressourcen zu warten.

document.addEventListener('DOMContentLoaded', function() {
   console.log("The document contents are now available!");
});

Ereignisobjekt

Um auf das Ereignisobjekt zuzugreifen, fügen Sie einen event in die Callback-Funktion des Ereignislisteners ein:

var foo = document.getElementById("foo");
foo.addEventListener("click", onClick);

function onClick(event) {
  // the `event` parameter is the event object
  // e.g. `event.type` would be "click" in this case
};

e.stopPropagation ();

HTML:

<div id="parent">
   <div id="child"></div>
</div>

Javascript:

var parent = document.querySelector('#parent');
var child = document.querySelector('#child');

child.addEventListener('click', function(e) {
   e.stopPropagation();
   alert('child clicked!');
});

parent.addEventListener('click', function(e) {
   alert('parent clicked!');
});

Da das Kind die Weitergabe von Ereignissen stoppt und die Ereignisse während der Bubbling-Phase überwacht werden, wird durch Klicken auf das Kind nur das Kind ausgelöst. ohne die Ausbreitung zu stoppen, werden beide Ereignisse ausgelöst.

e.preventDefault ();

Die event.preventDefault() -Methode stoppt die Standardaktion eines Elements.

Zum Beispiel:

• Verhindern, dass ein Senden-Button ein Formular sendet
• Verhindern, dass ein Link der URL folgt

var allAnchorTags = document.querySelector('a');

allAnchorTags.addEventListener('click', function(e){
    e.preventDefault();
    console.log('anchor tags are useless now! *evil laugh*');
});

e.target vs e.currentTarget

e.currentTarget Gibt das aktuelle Ziel für das Ereignis an, während das Ereignis das DOM durchquert. Es bezieht sich immer auf das Element, an das der Event-Handler angehängt wurde, im Gegensatz zu event.target, das das Element identifiziert, auf dem das Ereignis aufgetreten ist.

mit anderen Worten

e.target gibt zurück, was den Ereignis-Dispatcher auslöst

e.currentTarget gibt das zurück, was Sie Ihrem Listener zugewiesen haben.

HTML:

<body>
   <button id="my-button"></button>
</body>

Javascript:

var body = document.body;
body.addEventListener( 'click', function(e) {
    console.log('e.target', e.target);
    console.log('e.currentTarget', e.currentTarget);
});

wenn Sie auf my-button klicken,

• e.target wird my-button
• e.currentTarget wird body

Ereignisblubbern und Aufnehmen

Ereignisse, die mit DOM-Elementen ausgelöst werden, wirken sich nicht nur auf das Element aus, auf das sie abzielen. Alle Vorfahren des Ziels im DOM haben möglicherweise auch die Möglichkeit, auf das Ereignis zu reagieren. Betrachten Sie das folgende Dokument:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
  <p id="paragraph">
    <span id="text">Hello World</span>
  </p>
</body>
</html>

Wenn wir jedem Element Listener ohne Optionen hinzufügen, lösen Sie einen Klick auf die Spanne aus ...

document.body.addEventListener('click', function(event) {
  console.log("Body clicked!");
});
window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph clicked!");
});
window.text.addEventListener('click', function(event) {
  console.log("Text clicked!");
});

window.text.click();

... dann sprudelt das Ereignis durch jeden Vorfahren und löst jeden Klick-Handler aus:

Text clicked!
Paragraph clicked!
Body clicked!

Wenn Sie möchten, dass einer Ihrer Handler verhindert, dass das Ereignis weitere Handler auslöst, kann er die event.stopPropagation() -Methode event.stopPropagation() . Wenn wir beispielsweise unseren zweiten Event-Handler durch Folgendes ersetzen:

window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph clicked, and that's it!");
  event.stopPropagation();
});

Wir würden die folgende Ausgabe sehen, ohne dass der click Handler von body ausgelöst wurde:

Text clicked!
Paragraph clicked, and that's it!

Schließlich haben wir die Möglichkeit, Ereignis-Listener hinzuzufügen, die während des " Captures " auslösen , anstatt zu blubbern. Bevor ein Ereignis durch seine Vorfahren aus einem Element auftaucht, wird es zunächst durch seine Vorfahren bis zum Element "eingefangen". Ein Erfassungslistener wird hinzugefügt, indem true oder {capture: true} als optionales drittes Argument für addEventListener . Wenn wir unserem ersten Beispiel oben folgende Hörer hinzufügen:

document.body.addEventListener('click', function(event) {
  console.log("Body click captured!");
}, true);
window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph click captured!");
}, true);
window.text.addEventListener('click', function(event) {
  console.log("Text click captured!");
}, true);

Wir erhalten folgende Ausgabe:

Body click captured!
Paragraph click captured!
Text click captured!
Text clicked!
Paragraph clicked!
Body clicked!

Standardmäßig werden Ereignisse in der Bubbling-Phase abgehört. Um dies zu ändern, können Sie angeben, in welcher Phase das Ereignis abgehört wird, indem Sie den dritten Parameter in der Funktion addEventListener angeben. (Weitere Informationen zum Aufnehmen und Sprudeln finden Sie in den Anmerkungen. )

element.addEventListener(eventName, eventHandler, useCapture)

useCapture: true bedeutet, auf das Ereignis zu hören, wenn es den DOM-Baum durchläuft. false bedeutet, dem Ereignis zuzuhören, während es in der DOM-Struktur nach oben geht.

window.addEventListener("click", function(){alert('1: on bubble')}, false);
window.addEventListener("click", function(){alert('2: on capture')}, true);

Die Benachrichtigungsfelder werden in dieser Reihenfolge angezeigt:

• 2: beim Capture
• 1: auf blase

Anwendungsfälle in der realen Welt

Das Capture-Event wird vor dem Bubble-Event abgesetzt. Sie können also sicherstellen, dass ein Event zuerst gehört wird, wenn Sie es in der Capture-Phase abhören.

Wenn Sie ein Klickereignis für ein übergeordnetes Element und ein anderes für sein untergeordnetes Element abhören, können Sie zuerst das untergeordnete Element oder das übergeordnete Element abhören, je nachdem, wie Sie den Parameter useCapture ändern.

Beim Sprudeln wird das Kindereignis zuerst aufgerufen, im Capture das übergeordnete Element

HTML:

<div id="parent">
   <div id="child"></div>
</div>

Javascript:

child.addEventListener('click', function(e) {
   alert('child clicked!');
});

parent.addEventListener('click', function(e) {
   alert('parent clicked!');
}, true);

Wenn Sie true für den übergeordneten eventListener festlegen, wird zuerst der übergeordnete Listener ausgelöst.

In Kombination mit e.stopPropagation () können Sie verhindern, dass das Ereignis den untergeordneten Ereignis-Listener oder das übergeordnete Ereignis auslöst. (mehr dazu im nächsten Beispiel)

Event-Delegation

Die Ereignisdelegation ist ein Prozess, mit dem wir das Hinzufügen von Ereignis-Listenern zu bestimmten Knoten vermeiden können. Stattdessen wird der Ereignis-Listener dem übergeordneten Knoten hinzugefügt. Dieser Mechanismus verwendet die Ereignisweiterleitung / -blubbern, um ein Ereignis an einem Element / Knoten einer höheren Ebene im DOM zu behandeln, anstatt das Element zu verwenden, von dem das Ereignis ausgeht. Angenommen, wir müssen Ereignisse für die folgenden Listenelemente hinzufügen:

<ul id="container">
    <li id="item-1" class="new">Item 1</li>
    <li id="item-2">Item 2</li>
    <li id="item-3">Item 3</li>
</ul>

Wir müssen click Handler hinzufügen. Grundsätzlich können wir jedem Element mithilfe einer Schleife Listener hinzufügen. Stellen wir uns jedoch vor, dass wir Elemente dynamisch hinzufügen möchten. Wenn wir also das DOM laden, registrieren wir alle Event-Handler. Nachdem das DOM alle Event-Handler für jedes Element initialisiert und registriert hat, reagiert das neu in das obige UL eingefügte Element beim Klicken nicht, da dieses Element nicht im DOM vorhanden war Wenn wir die Click-Event-Listener registriert haben.

Um dieses Problem zu überwinden, können wir die Ereignisdelegation nutzen. Das bedeutet, anstatt die Listener für jedes li Element selbst zu registrieren, können wir den Event-Listener beispielsweise an das übergeordnete UL Element binden:

document.getElementById("container").addEventListener("click", function(e) {
    console.log("List item " e.target.id, " was clicked!");
});

Da sich das Ereignis standardmäßig ausbreitet (Blasen aufwärts), wird ein Klick auf ein LI Element bewirkt, dass das UL Element das gleiche Ereignis auslöst. In diesem Fall können wir den Parameter e in der Funktion verwenden, bei dem es sich tatsächlich um das Ereignisobjekt handelt, und es enthält nützliche Informationen über das Ereignis, einschließlich des ursprünglichen Elements, das das Ereignis ausgelöst hat. So können wir zum Beispiel Folgendes verwenden:

document.getElementById("container").addEventListener("click", function(e) {

    // If UL itself then no action is require
    if(e.target.nodeName == 'UL') return false;

    if(e.target.classList.contains('new')) {
        console.log("List item " e.target.id, " was clicked and it's new!");
    }
});

Es ist also offensichtlich, dass mit e (Ereignisobjekt) das Quellelement (e.target) untersucht werden kann, und wir können leicht neue Elemente in den UL einfügen, nachdem DOM geladen wurde und der einzige delegierte Ereignishandler alle Klickereignisse verarbeitet innerhalb des übergeordneten UL was ebenfalls weniger Speicher benötigt, da für alle Elemente nur eine Funktion deklariert wurde.

Auslösen von benutzerdefinierten Ereignissen

Mit der CustomEvent-API können Entwickler benutzerdefinierte Ereignisse erstellen und diese auf DOM-Knoten auslösen. Dabei werden Daten übertragen.

event = new CustomEvent(typeArg, customEventInit);

typeArg - DOMString, der den Namen des Ereignisses darstellt.

customEventInit - sind optionale Parameter (die im folgenden Beispiel als e ).

Sie können eventListeners an ein document oder ein beliebiges HTML-Element anhängen.

Nachdem ein benutzerdefiniertes Ereignis hinzugefügt und an ein Element (oder Dokument) gebunden wurde, möchten Sie es möglicherweise manuell aus Javascript auslösen.

document.addEventListener("event-name", function(e) {
  console.log(e.detail); // logs custom object passed from the event.
});

var event = new CustomEvent("event-name", { "param-name": "param-value" });
document.dispatchEvent(event);