Detaillierte Erläuterung des Sprudelns von Javascript-Ereignissen und Methoden zum Erfassen und Blockieren von Javascript-Fähigkeiten

1. Der Ablauf der Ereignisse

Der Ursprung dieses Problems ist sehr einfach. Angenommen, Sie haben ein Element, das in einem anderen Element verschachtelt ist.

Code kopieren Code wie folgt :

----------------------------------
|. element1                                                                               | ---- |

------------------------ - ----------

: Und beide haben einen onClick-Ereignishandler. Wenn der Benutzer auf Element 2 klickt, werden die Klickereignisse sowohl von Element 1 als auch von Element 2 ausgelöst. Doch welches Ereignis wird zuerst ausgelöst? Welche Event-Handler-Funktion wird zuerst ausgeführt? Mit anderen Worten: Wie war der genaue Ablauf der Ereignisse?

2. Zwei Modelle

Wie erwartet verfolgten Netscape und Microsoft zwei sehr unterschiedliche Ansätze, um mit den Tagen der „Browserkriege“ umzugehen:

Netscape befürwortet, dass das Ereignis von Element 1 zuerst auftritt.

Microsoft behauptet, dass Element 2 Priorität hat.

Beides von ihnen Die Abfolge der Ereignisse ist diametral entgegengesetzt. Der Explorer-Browser unterstützt nur Bubbling-Ereignisse, Mozilla, Opera7 und Konqueror unterstützen beides. Das ältere Opera und iCab unterstützen beides nicht

3. Ereignisse erfassen

Wenn Sie die Erfassung von Ereignissen verwenden

Kopieren Sie den Code Der Code lautet wie folgt:

-----------| |---

| --------|.----------- |
| |element2 / |
|. -- --------- |
| Ereigniserfassung |
------------------------ - -----

: Der Event-Handler von Element 1 wird zuerst ausgelöst, und der Event-Handler von Element 2 wird zuletzt ausgelöst

4. Sprudelnde Ereignisse

Wenn Sie Blasenereignisse verwenden

Kopieren Sie den Code

Der Code lautet wie folgt: ------------|---

| - ---------- |---------- |

| ----------- |
|. Event BUBBLING |
----------- -- -------

: Zuerst wird die Verarbeitungsfunktion von Element 2 ausgelöst, gefolgt von Element 1


5. W3C-Modell

W3c hat in diesem Kampf klugerweise die richtige Lösung gewählt. Jedes Ereignis, das im W3C-Ereignismodell auftritt, tritt zunächst in die Erfassungsphase ein, bis es das Zielelement erreicht, und tritt dann in die Blasenphase ein

Code kopieren

Der Code lautet wie folgt:

                                      --|. |. | --|. |--------- -|. |
|. |element2 / |
|. W3C-Ereignismodell |
------------------------ ------

Als Webentwickler können Sie wählen, ob die Ereignisverarbeitungsfunktion in der Erfassungsphase oder in der Bubbling-Phase gebunden werden soll. Dies wird durch die Methode addEventListener() erreicht Wenn diese Funktion wahr ist, bindet sie die Funktion in der Einfangphase, andernfalls bindet sie die Funktion in der Blasenphase.

Angenommen, Sie möchten

Code kopieren

Der Code lautet wie folgt:element1 .addEventListener(' click',doSomething2,true) element2.addEventListener('click',doSomething,false)

Was passiert als nächstes, wenn der Benutzer auf Element 2 klickt:

(Das Ereignis ist hier wie ein Tourist, der von außen nach innen reist, sich allmählich dem Hauptelement nähert, das ausgelöst wurde, und dann in die entgegengesetzte Richtung geht)

1. Das Klickereignis tritt zunächst in die Erfassungsphase ein (und nähert sich allmählich der Richtung von Element 2). Überprüfen Sie, ob eines der Vorfahrenelemente von Element 2 in der Erfassungsphase einen Onclick-Handler hat

2. Es wird festgestellt, dass Element 1 einen hat, daher wird doSomething2 ausgeführt

3. Das Ereignis überprüft das Ziel selbst (Element 2 ), aber es gibt keinen Onclick-Handler in der Erfassungsphase. Es wurden weitere Verarbeitungsfunktionen gefunden. Das Ereignis beginnt in die Blasenphase einzutreten und doSomething () wird auf natürliche Weise ausgeführt. Dabei handelt es sich um eine Funktion, die an die Blasenphase von Element 2 gebunden ist.

4. Das Ereignis entfernt sich von Element 2, um zu sehen, ob während der Bubbling-Phase an ein Vorgängerelement ein Handler gebunden ist. Es gibt keinen solchen Fall, also passiert nichts

Der umgekehrte Fall ist:

Kopieren Sie den Code

Der Code lautet wie folgt: element1.addEventListener('click',doSomething2,false) element2.addEventListener('click',doSomething,false)

Wenn der Benutzer nun auf Element 2 klickt, passiert Folgendes:
1. Klicken Sie auf das Ereignis, um in die Erfassungsphase zu gelangen. Überprüfen Sie, ob eines der Vorfahrenelemente von Element 2 in der Erfassungsphase einen Onclick-Handler hat. Das Ergebnis ist nichts

2. Das Ereignis erkennt das Ziel selbst. Das Ereignis beginnt in die Blasenphase einzutreten und die an die Blasenphase von Element 2 gebundene Funktion wird ausgeführt. doSomething()

3. Das Ereignis beginnt, sich vom Ziel zu entfernen. Überprüfen Sie, ob während der Bubbling-Phase eines der Vorgängerelemente an es gebunden ist. von Element 1 wird ausgeführt
6. Kompatibilität und traditioneller Modus

In Browsern, die w3c dom (Document Object Model) unterstützen, ist die traditionelle Ereignisbindungsmethode

Code kopieren

Der Code ist wie folgt:

element1.onclick = doSomething2; gilt standardmäßig als an die Bubbling-Phase gebunden 7. Verwenden Sie sprudelnde Ereignisse

Nur ​​wenige Entwickler werden bewusst Bubbling-Events oder Capture-Events einsetzen. Auf den Webseiten, die sie heute erstellen, ist es nicht erforderlich, dass ein Ereignis von mehreren Funktionen verarbeitet wird, da es zu Blasenbildung kommt. Aber manchmal sind Benutzer oft verwirrt, weil nach dem Klicken mit der Maus nur einmal viele Dinge passieren (mehrere Funktionen werden aufgrund des Sprudelns ausgeführt). In den meisten Fällen möchten Sie dennoch, dass Ihre Verarbeitungsfunktionen voneinander unabhängig sind. Wenn der Benutzer auf ein Element klickt, sind das, was passiert, und das, was passiert, wenn der Benutzer auf ein anderes Element klickt, unabhängig voneinander und nicht durch Bubbling verknüpft.

8. Es passiert ständig

Das erste, was Sie verstehen müssen, ist, dass Event Capture oder Bubbling immer stattfindet. Wenn Sie eine allgemeine On-Click-Verarbeitungsfunktion für das gesamte Seitendokument definieren

Kopieren Sie den Code

Der Code lautet wie folgt:

document.onclick = doSomething;if (document.captureEvents) document.captureEvents(Event.CLICK);

Das Klickereignis des Klickens auf ein beliebiges Element auf der Seite wird schließlich zur obersten Dokumentebene der Seite hochsteigen und so die allgemeine Verarbeitungsfunktion auslösen, es sei denn, die vorherige Verarbeitungsfunktion weist ausdrücklich darauf hin, dass das Blasen beendet werden soll Das Sprudeln wird gestoppt. Wird nicht auf die gesamte Dokumentebene übertragen

Ergänzung zum zweiten Satz des obigen Codes:

>>>Sprechen wir zuerst über den IE
object.setCapture() Wenn ein Objekt setCapture ist, wird seine Methode zur Erfassung an das gesamte Dokument vererbt.
Wenn Sie die Methode zum Erfassen des gesamten Dokuments nicht erben müssen, verwenden Sie object.releaseCapture()
>>>others
Mozilla hat auch eine ähnliche Funktion, die Methode ist etwas anders
window.captureEvents (Event.eventType)
window.releaseEvents(Event.eventType)
>>>example

Code kopieren Der Code lautet wie folgt:

//Wenn nur der folgende Satz vorhanden ist, wird der Klick nur ausgelöst, wenn auf obj geklickt wird obj.onclick = function(){alert(" etwas")🎜>//Wenn Sie den folgenden Satz hinzufügen, wird die Methode an das Dokument (oder Fenster, verschiedene Browser sind unterschiedlich) vererbt, um
obj.captureEvents(Event.click); //FFobj.setCapture() // IE

9. Verwendung

Da jede Ereignisweitergabe im Seitendokument (dieser obersten Ebene) endet, ist der Standard-Ereignishandler möglich, vorausgesetzt, Sie haben eine Seite wie diese

Code kopieren Der Code lautet wie folgt:

-------------------------- --------

|.                                 -- ------- ----- |

----- --------------------------------- -
element1.onclick = doSomething;
element2.onclick = doSomething;
document.onclick = defaultFunction;



Wenn der Benutzer nun auf Element 1 oder Element 2 klickt, wird doSomething() ausgeführt. Wenn Sie möchten, können Sie verhindern, dass Ereignisse hier aufsteigen, wenn Sie nicht möchten, dass sie zu defaultFunction() aufsteigen. Wenn der Benutzer jedoch auf eine andere Stelle auf der Seite klickt, wird defaultFunction() trotzdem ausgeführt. Dieser Effekt kann manchmal nützlich sein.

Einstellungsseite – ermöglicht der Verarbeitungsfunktion einen größeren Triggerbereich, der im „Drag-Effekt“-Skript erforderlich ist. Im Allgemeinen bedeutet das Auftreten eines Mousedown-Ereignisses auf einer Elementebene, dass das Element ausgewählt und aktiviert wird, um auf das Mousemove-Ereignis zu reagieren. Obwohl Mousedown normalerweise an diese Elementebene gebunden ist, um Browserfehler zu vermeiden, muss der Umfang der Ereignisfunktionen der anderen beiden die gesamte Seite (?)
umfassen Denken Sie an das erste Gesetz der Browserologie: Alles kann passieren, und dann sind Sie zumindest einigermaßen vorbereitet. Es kann also passieren, dass der Benutzer beim Ziehen seine Maus stark auf der Seite bewegt, das Skript jedoch nicht auf die große Amplitude reagieren kann, sodass die Maus nicht mehr auf der Elementebene

bleibt

1. Wenn die Onmouseover-Handlerfunktion an die Elementebene gebunden ist, reagiert diese Elementebene nicht mehr auf Mausbewegungen, was zu einem seltsamen Gefühl bei den Benutzern führt.

2. Wenn die Onmouseup-Handlerfunktion an die Elementebene gebunden ist Das Ereignis kann nicht ausgelöst werden. Die Folge ist, dass die Elementebene weiterhin auf Mausbewegungen reagiert, nachdem der Benutzer diese Elementebene löschen möchte. Das wird noch mehr Verwirrung stiften (?)

In diesem Beispiel ist das Event-Bubbling also sehr nützlich, da durch die Platzierung Ihrer Handlerfunktionen auf Seitenebene sichergestellt wird, dass sie immer ausgeführt werden können

10. Schalten Sie es aus (um zu verhindern, dass Ereignisse sprudeln)

Aber im Allgemeinen sollten Sie das gesamte Sprudeln und Aufnehmen ausschalten, um sicherzustellen, dass sich die Funktionen nicht gegenseitig stören. Wenn Ihre Dokumentstruktur außerdem recht komplex ist (viele ineinander verschachtelte Tabellen usw.), möchten Sie möglicherweise die Bubbling-Funktion deaktivieren, um Systemressourcen zu sparen. An diesem Punkt muss der Browser jeden Vorfahren des Zielelements überprüfen, um festzustellen, ob es über eine Handlerfunktion verfügt. Selbst wenn niemand gefunden wird, nimmt die Suche gerade noch viel Zeit in Anspruch

Im Microsoft-Modell müssen Sie die cancelBubble-Eigenschaft des Ereignisses auf true setzen

Kopieren Sie den Code

Der Code lautet wie folgt folgt:window.event.cancelBubble = true
Im W3C-Modell müssen Sie die stopPropagation()-Methode des Ereignisses aufrufen

Kopieren Sie den Code Der Code lautet wie folgt :

e.stopPropagation()

Dadurch wird verhindert, dass sich jegliche Blasenbildung nach außen ausbreitet. Als browserübergreifende Lösung sollte dies wie folgt erfolgen:

Code kopieren Der Code lautet wie folgt:

Funktion doSomething(e)

{
　 if (!e) var e = window.event;

e.cancelBubble = true;

if (e.stopPropagation) e.stopPropagation();

}

Es schadet nicht, cancelBubble in Browsern festzulegen, die das cancelBubble-Attribut unterstützen. Der Browser zuckt mit den Schultern und erstellt dieses Attribut. Natürlich wird dadurch das Sprudeln nicht wirklich aufgehoben, aber es stellt zumindest sicher, dass dieser Befehl sicher und korrekt ist

11. aktuelles Ziel

Wie wir zuvor gesehen haben, verwendet ein Ereignis das Attribut „target“ oder „srcElement“, um anzugeben, auf welchem ​​Zielelement das Ereignis aufgetreten ist (d. h. auf dem Element, auf das der Benutzer ursprünglich geklickt hat). In unserem Fall ist es Element 2, weil wir darauf geklickt haben.

Es ist sehr wichtig zu verstehen, dass sich das Zielelement während der Einfang- oder Sprudelphase nicht ändert, sondern immer mit Element 2 verknüpft ist.

Aber nehmen wir an, wir binden die folgende Funktion

Code kopieren Der Code lautet wie folgt:

element1. onclick = doSomething;

element2.onclick = doSomething;

Wenn der Benutzer auf Element 2 klickt, wird doSomething() zweimal ausgeführt. Aber woher wissen Sie, welches HTML-Element auf dieses Ereignis reagiert? target/srcElement gibt ebenfalls keinen Hinweis, aber die Leute werden immer Element 2 bevorzugen, weil es die Ursache des Ereignisses ist (weil es das ist, worauf der Benutzer geklickt hat).
Um dieses Problem zu lösen, hat w3c das currentTarget-Attribut hinzugefügt, das auf das Element verweist, das das Ereignis verarbeitet: Das ist genau das, was wir brauchen. Leider gibt es in Microsoft-Modellen kein ähnliches Attribut
Sie können auch das Schlüsselwort „this“ verwenden. Im obigen Beispiel entspricht es dem HTML-Element, das das Ereignis verarbeitet, z. B. currentTarget.

12. Probleme mit dem Microsoft-Modell

Aber wenn Sie das Microsoft-Ereignisbindungsmodell verwenden, entspricht das Schlüsselwort this nicht dem HTML-Element. Lenovo fehlt ein Microsoft-Modell ähnlich der currentTarget-Eigenschaft (?) – wenn Sie dem obigen Code folgen, bedeuten Sie:

Code kopieren Der Code lautet wie folgt:

element1.attachEvent('onclick',doSomething)

element2.attachEvent('onclick',doSomething)

Sie können nicht genau wissen, welches HTML-Element für die Verarbeitung des Ereignisses verantwortlich ist. Für mich ist dies das schwerwiegendste Problem mit dem Ereignisbindungsmodell. Dies ist auch der Grund, warum ich es nie verwende, selbst wenn ich Anwendungen nur für den IE unter Windows entwickle

Ich hoffe, bald aktuelle Target-ähnliche Eigenschaften hinzufügen zu können – oder dem Standard folgen? Webentwickler benötigen diese Informationen

Nachtrag:

Da ich JavaScript noch nie in der Praxis verwendet habe, verstehe ich einige Teile dieses Artikels nicht ganz, sodass ich sie nur abrupt übersetzen kann, z. B. den Abschnitt über den Drag-Effekt. Wenn Sie Ergänzungen haben oder Bei Fragen können Sie mir eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung!