Dieser Artikel beschreibt die Verwendung der JavaScript -Ereignisdelegation. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
1. Klicken Sie auf einen Teil der Seite, um das Ereignis auszulösen
Erstellen Sie eine Skript1.js -Datei.
Kopieren Sie den Code wie folgt: (function () {
EventUtility.AdDevent (Dokument, "Click", Funktion (EVT) {
alarm ('Hallo');
});
} ());
Seitenabschnitt.
Kopieren Sie den Code wie folgt: <kopf>
<meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/>
<title> </title>
</head>
<body>
<script src = "eventUtility.js"> </script>
<script src = "script1.js"> </script>
</body>
</html>
Ausgabeergebnis: Klicken Sie auf eine der Seite.
Manchmal möchten wir jedoch auf ein Element im Dokument klicken, um ein Ereignis auszulösen.
2. Verwenden Sie Delegate, um Ereignisse auszulösen
Fügen Sie der Seite ein Tag hinzu.
Kopieren Sie den Code wie folgt: <kopf>
<meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/>
<title> </title>
</head>
<body>
<div>
<p> <a href = "#"> klicken Sie auf mich </a> </p>
</div>
<script src = "eventUtility.js"> </script>
<script src = "script1.js"> </script>
</body>
Ändern Sie script1.js an:
Kopieren Sie den Code wie folgt: (function () {
EventUtility.AdDevent (Dokument, "Click", Funktion (EVT) {
// das Klick -Objekt abrufen
var target = eventUtility.gettarget (EVT);
// Holen Sie sich den Tag -Namen des Klick -Objekts
var tagname = target.tagname;
// Wenn Tag a ist
if (tagname === "a") {
alarm ("klicken Sie mich");
// Blockieren Sie das Standardverhalten von Links
EventUtility.PreventDefault (EVT);
}
});
} ());
Ausgabeergebnis: Das Feld wird nur angezeigt, wenn Sie auf der Seite auf das A -Tag klicken.
Die oben genannten Vorteile sind: Unabhängig davon, wie viele Tagelemente dem Dokument hinzugefügt werden, haben alle Tags die Möglichkeit, ausgelöst zu werden. Dies ist die Inbetriebnahme der Veranstaltung. Wir möchten Ereignisse für untergeordnete Elemente registrieren, jedoch zuerst Ereignisse registrieren, wenn es um das übergeordnete Element des untergeordneten Elements geht. Auf diese Weise wird jedes Element des gleichen Typs wie das untergeordnete Element im übergeordneten Element dynamisch hinzugefügt.
Wenn wir Ereignisse an Kinderelementen registrieren und dynamisch Elemente des gleichen Typs wie die untergeordneten Elemente im Dokument hinzufügen, müssen wir Ereignisse für diese untergeordneten Elemente registrieren, die gerade dynamisch hinzugefügt wurden.
Darüber hinaus nutzt die Event -Delegation "Event Blasen" gut. Wenn Sie auf ein untergeordnetes Element klicken, erfasst das übergeordnete Element des untergeordneten Elements das Klickereignis und löst seine eigene Methode aus.
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.