Was sind Ereignisse?

Ereignisse sind Aktionen, die ausgeführt werden, wenn ein Benutzer mit der Seite interagiert - z. B. Klicken auf ein Element, Eingeben eines Felds oder Laden einer Seite.

Der Browser benachrichtigt das System, dass etwas passiert ist und dass es behandelt werden muss. Es wird behandelt, indem eine Funktion namens an registriert wird event handler, die auf einen bestimmten Ereignistyp wartet.

Was bedeutet es, "ein Ereignis zu behandeln"?

Um es einfach auszudrücken: Nehmen wir an, Sie möchten an Web Development-Meetup-Veranstaltungen in Ihrer Gemeinde teilnehmen.

Dazu melden Sie sich für ein lokales Treffen mit dem Namen "Women Who Code" an und abonnieren Benachrichtigungen. Auf diese Weise werden Sie jedes Mal benachrichtigt, wenn ein neues Treffen geplant ist. Das ist Event-Handling!

Das "Ereignis" hier ist ein neues JS-Treffen. Wenn ein neues Meetup veröffentlicht wird, fängt die Website meetup.com diese Änderung ab und "behandelt" dieses Ereignis. Es benachrichtigt Sie dann und ergreift so eine "Aktion" für das Ereignis.

In einem Browser werden Ereignisse ähnlich behandelt. Der Browser erkennt eine Änderung und benachrichtigt eine Funktion (Ereignishandler), die ein bestimmtes Ereignis abhört. Diese Funktionen führen dann die gewünschten Aktionen aus.

Schauen wir uns ein Beispiel für einen clickEreignishandler an:

 Press 1 Press 2 Press 3 const buttonContainer = document.querySelector('.buttons'); console.log('buttonContainer', buttonContainer); buttonContainer.addEventListener('click', event => { console.log(event.target.value) }) 

Was sind die verschiedenen Arten von Veranstaltungen?

Ein Ereignis kann jedes Mal ausgelöst werden, wenn ein Benutzer mit der Seite interagiert. Diese Ereignisse können ein Benutzer sein, der durch die Seite blättert, auf ein Element klickt oder eine Seite lädt.

Hier sind einige häufige Ereignisse - onclickdblclickmousedownmouseupmousemovekeydownkeyuptouchmovetouchstarttouchendonloadonfocusonbluronerror onscroll

Verschiedene Phasen von Ereignissen - Erfassung, Ziel, Blase

Wenn sich ein Ereignis durch das DOM bewegt - egal ob es sprudelt oder herunterrutscht - wird es als Ereignisausbreitung bezeichnet. Das Ereignis wird über den DOM-Baum übertragen.

Ereignisse treten in zwei Phasen auf: der Blasenphase und der Erfassungsphase.

In der Erfassungsphase, auch Trickling-Phase genannt, "rieselt" das Ereignis auf das Element herunter, das das Ereignis verursacht hat.

Es beginnt mit dem Element und dem Handler auf Stammebene und wird dann bis zum Element weitergegeben. Die Erfassungsphase ist abgeschlossen, wenn das Ereignis das erreicht target.

In der Blasenphase wird das Ereignis bis zum DOM-Baum "gesprudelt". Es wird zuerst vom innersten Handler erfasst und verarbeitet (der dem Element am nächsten liegt, bei dem das Ereignis aufgetreten ist). Es sprudelt dann auf die höheren Ebenen des DOM-Baums (oder breitet sich dort aus), weiter bis zu seinen Eltern und schließlich bis zu seiner Wurzel.

Sie ist ein Trick, mit dem Sie sich daran erinnern können:

trickle down, bubble up 

Hier ist eine Infografik aus dem Quirksmode, die dies sehr gut erklärt:

 / \ ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 | | | | | ------------------------- | | Event BUBBLING | ----------------------------------- | | ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 \ / | | | ------------------------- | | Event CAPTURING | ----------------------------------- 

Zu beachten ist, dass unabhängig davon, ob Sie einen Ereignishandler in einer der beiden Phasen registrieren, IMMER beide Phasen auftreten. Alle Ereignisse sprudeln standardmäßig.

Mithilfe der Funktion können Sie Ereignishandler für Phasen, Blasen oder Erfassen registrieren addEventListener(type, listener, useCapture). Wenn auf useCapturegesetzt ist, falsebefindet sich der Ereignishandler in der Blasenphase. Ansonsten befindet es sich in der Erfassungsphase.

Die Reihenfolge der Phasen des Ereignisses hängt vom Browser ab.

Um zu überprüfen, welcher Browser zuerst die Erfassung ehrt, können Sie den folgenden Code in JSfiddle ausprobieren:

 Child One 

const childOne = document.getElementById("child-one"); const childOneHandler = () => { console.log('Captured on child one') } const childOneHandlerCatch = () => { console.log('Captured on child one in capture phase') } childOne.addEventListener("click", childOneHandler); childOne.addEventListener("click", childOneHandlerCatch, true); 

In Firefox, Safari und Chrome lautet die Ausgabe wie folgt:

Wie man ein Ereignis hört

Es gibt zwei Möglichkeiten, ein Ereignis anzuhören:

1. addEventListener
2. Inline-Ereignisse wie onclick

//addEventListener document.getElementByTag('a').addEventListener('click', onClickHandler); //inline using onclick Click me 

Was ist besser - ein Inline-Event oder addEventListener?

1. addEventListener gibt Ihnen die Möglichkeit, unbegrenzte Event-Handler zu registrieren.
2. removeEventListener kann auch zum Entfernen von Ereignishandlern verwendet werden
3. Das useCaptureFlag kann verwendet werden, um anzuzeigen, ob ein Ereignis in der Erfassungsphase oder in der gebündelten Phase behandelt werden muss.

Codebeispiele und Live-Action

Sie können diese Ereignisse in JSFiddle ausprobieren, um damit herumzuspielen.

 Child One 
 Child Two 

const wrapperDiv = document.getElementById("wrapper-div"); const childOne = document.getElementById("child-one"); const childTwo = document.getElementById("child-two"); const childOneHandler = () => { console.log('Captured on child one') } const childTwoHandler = () => { console.log('Captured on child two') } const wrapperDivHandler = () => { console.log('Captured on wrapper div') } const childOneHandlerCatch = () => { console.log('Captured on child one in capture phase') } const childTwoHandlerCatch = () => { console.log('Captured on child two in capture phase') } const wrapperDivHandlerCatch = () => { console.log('Captured on wrapper div in capture phase') } childOne.addEventListener("click", childOneHandler); childTwo.addEventListener("click", childTwoHandler); wrapperDiv.addEventListener("click", wrapperDivHandler); childOne.addEventListener("click", childOneHandlerCatch, true); childTwo.addEventListener("click", childTwoHandlerCatch, true); wrapperDiv.addEventListener("click", wrapperDivHandlerCatch, true); 

TL; DR

Ereignisphasen sind Erfassung (DOM -> Ziel), Blase (Ziel-> DOM) und Ziel.

Ereignisse können mithilfe von addEventListeneroder Inline-Methoden wie z onclick.

 addEventListener can add multiple events, whereas with onclick this cannot be done. onclick can be added as an HTML attribute, whereas an addEventListener can only be added within  elements. addEventListener can take a third argument which can stop the event propagation. 

Weiter lesen

//www.quirksmode.org/js/events_order.html

//jsfiddle.net/r2bc6axg/

//stackoverflow.com/questions/6348494/addeventlistener-vs-onclick

//www.w3.org/wiki/HTML/Attributes/_Global#Event-handler_Attributes

Melden Sie sich für meinen Newsletter an oder folgen Sie mir auf Twitter, um über weitere kurze Tutorials wie dieses auf dem Laufenden zu bleiben