Wie Erstellen von benutzerdefinierten Events in javascript mit HTML zu programmieren

Die Standardereignisse mit javascript zur Verfügung gestellt gute Leistung für die häufigsten Aufgaben. Aber manchmal werden Sie eine benutzerdefinierte Veranstaltung benötigen. Zum Beispiel müssen Sie ein Verfahren zur Durchführung eines Klick haben und javascript ein Standard-Event, diesen Bedarf zu behandeln. Es gibt jedoch Zeiten, in denen Sie passieren Informationen benötigen, dass die Macher von javascript kann nicht voraussehen. In diesem Fall müssen Sie eine benutzerdefinierte Ereignis erstellen.

Wie man mit dem CustomEvent Objekt in javascript zu arbeiten

Das CustomEvent Objekt stellt die Mittel für ein neues Ereignis erstellen - eine, die nicht Teil von javascript standardmäßig ist. Das CustomEvent Objekt ist trügerisch einfach. Es enthält alle sind die beiden Eigenschaften in der folgenden Liste beschrieben:

• Veranstaltungsname: Eine Zeichenkette, die den Namen, den Sie für den Fall verwendet werden soll. Der Name kann alles, was Sie wollen, aber es kann keine Leerzeichen, wie der Raum enthalten. Verwenden Sie einen Unterstrich (_), Falls gewünscht, um Wörter zu trennen.

• Ereignisdaten: Ein Objektliteral, die die Daten im Rahmen der Veranstaltung übergeben möchten. Dies ist Teil eines benutzerdefinierten Ereignisses recht komplex werden kann, weil Sie jede Menge Daten in irgendeiner Form weitergeben können Sie wollen, solange die Daten das Objektliteral Format erfüllt. Die Ereignisdaten kommt in zwei Formen:

• Standard-Daten: Sie können die Informationen für einen der von der Norm unterstützten Eigenschaften liefern Event Objekt. Die meisten Entwickler definieren die Blasen und cancelable Eigenschaften als Minimum.

• Kundenspezifische Daten: Eine benutzerdefinierte Ereignis können benutzerdefinierte Daten in irgendeiner Form enthalten. Sie müssen mit den Namen der Standardeigenschaften zu vermeiden. Zum Beispiel können Sie nicht eine benutzerdefinierte Eigenschaft den Namen geben Blasen. Viele Entwickler verwenden die Detail Eigentum enthalten Informationen über das benutzerdefinierte Ereignis, aber das ist nur eine Konvention, und Sie sind frei, jede Form Sie sehen, passen zu verwenden.

Wie das benutzerdefinierte Ereigniscode in javascript zu erstellen

javascript macht es ganz einfach benutzerdefinierte Ereignisse Ihrer eigenen zu erstellen. Diese Ereignisse könnten alles sein. Es gibt viele Anwendungen für benutzerdefinierte Ereignisse, aber sie alle nach dem gleichen Muster. In diesem Beispiel beginnt das globale Objekt benutzerdefinierte Ereignis hier gezeigt.

// Definition eines neuen event.var SpecialEvent = new CustomEvent ( "SpecialMessage", {Detail: {Nachricht: "Hallo dort", time: new Date ()}, blasen: true, cancelable: true}) -

Beachten Sie, dass dieses Ereignis in einem Formular von Objektliteral beruht. Beachten Sie jedoch, wie Detail ist eigentlich ein verschachteltes Objekt wörtlich. Sie können Nest Informationen wie viele Ebenen tief wie nötig. Wenn Sie später eine Funktion des Ereignisses zu ändern möchten, können Sie dies tun. Zum Beispiel, um die Nachricht zu ändern, würden Sie Code ähnlich wie diese verwenden:

SpecialEvent.detail.message = "Eine neue Nachricht!" -

Nun, da Sie eine benutzerdefinierte Ereignis haben zu können, müssen Sie in drei Phasen zu gehen, um es zu implementieren. Zunächst müssen Sie das Ereignis zu einer Kontrolle zuordnen. Das Beispiel verwendet ein Etikett und erzählt die Anwendung die Zuordnung als Teil des Formulars Ladevorgang zu machen: ein. Hier ist der Code, den Sie das Ereignis zu dem Label zuweisen müssen:

Funktion AssignEvent () {// Rufen Sie das Objekt reference.var Label = document.getElementById ( "Custom") - // Zuweisen eines Ereignisses an den object.Label.addEventListener ( "SpecialMessage", handle, false) -}

Hier sehen Sie es ein Standard-Click-Ereignis für die SpecialMessage benutzerdefinierte Ereignis. Egal, ob Sie eine Standard- oder benutzerdefinierte Ereignis zuzuordnen, ist die Technik, die gleiche.

Die zweite Phase der Umsetzung eines benutzerdefinierten Ereignisses feuert die Veranstaltung. Dieses Beispiel stützt sich auf eine Schaltfläche, um die Aufgabe zu erfüllen, aber jede Aktion kann das Ereignis ausgelöst. Alles, was Sie brauchen, ist eine Aktion, wo man Code anhängen können die Aufgabe des Brennens des Ereignisses auszuführen. Hier ist der Code Ereignis Brennen für dieses Beispiel verwendet:

Funktion Fireevent () {// Rufen Sie das Objekt reference.var Label = document.getElementById ( "Custom") - // Fire the event.Label.dispatchEvent (SpecialEvent) -}

Das dispatch () Funktion führt die eigentliche Arbeit. Beachten Sie, dass Sie das Ereignis ausgelöst mit dem Event-Objekt zuvor erstellt wurde. Wenn Sie wollte, könnte man Werte zu einem der in der benutzerdefinierten Ereignis gefunden Inhalt zuweisen. Was das betrifft, könnten Sie neue Inhalte erstellen, wie benötigt, solange der Empfänger weiß, wie man mit den neuen Inhalten zu arbeiten.

Die dritte Phase der Implementierung eines benutzerdefinierten Ereignisses ist die Bereitstellung der Event-Handler. Der Event-Handler empfängt das benutzerdefinierte Ereignis von der Steuerung, die mit dem Event-Handler zugewiesen ist. Hier ist der Event-Handler in diesem Fall verwendet:

Funktion handle (event) {// Anzeige der Veranstaltung information.document.getElementById ( "Custom") innerHTML- =. "Control:" + event.currentTarget.id + "
Nachricht: "+ event.detail.message +"
Zeit gesendet: "+ event.detail.time.toTimeString () -}

Bildschirm Alles, was dieser Event-Handler tut, ist das benutzerdefinierte Ereignisinformationen anzuzeigen.