JavaScript/DOM/EventTarget/dispatchEvent

Mit der Methode EventTarget.dispatchEvent() können synthetic Events an ein ausgewähltes Zielobjekt verschickt werden.

Syntax

cancelled = !target.dispatchEvent(event)

• event: das Ereignis, das verschickt werden soll.
• target: der Auslöser, der mit Event.target ermittelt wird

Anwendungsbeispiel

Beispiel

  <p><!-- text --></p>

   (function displayMessage (paragraph) {
      var event = new CustomEvent('fill', {
        detail : {
          message : 'text'
        }
      });
      paragraph.addEventListener('fill', function (event) {
        this.textContent = event.detail.message;
        console.info('content provided');
      });
      paragraph.dispatchEvent(event);
    }(document.body.firstElementChild));

In diesem nur mäßig sinnvollen Beispiel wird zunächst über die Schnittstelle CustomEvent ein eigenes Ereignis erstellt und dann für dieses Ereignis ein Event-Listener registriert.

Schließlich wird das erstellte Ereignis unter Verwendung der Methode dispatchEvent an das Zielobjekt verschickt, wobei dem ausgewählten Element im Ergebnis ein String als textueller Inhalt zugewiesen wird, der dem Ereignis mit auf den Weg gegeben wurde.

Das Element P erbt hier von EventTarget sowohl addEventListener als auch dispatchEvent (und natürlich auch removeEventListener).

Anwendungsbeispiel

Beispiel ansehen …

    function InitMouseDown (event) {
      if (event.initMouseEvent) {     // alle Browser und IE9+
        var mousedownEvent = document.createEvent ("MouseEvent");
        mousedownEvent.initMouseEvent ("mousedown", true, true, window, 0, 
                                       event.screenX, event.screenY, event.clientX, event.clientY, 
                                       event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, 
                                       0, null);
        event.target.dispatchEvent (mousedownEvent);
        } 
    }

<button onmouseover="InitMouseDown (event);" 
        onmousedown="alert ('Das mousedown-Ereignis wurde ausgelöst!')">
    Bewegen Sie die Maus über diesen Button!
</button>

Benutzen Sie die createEvent-Methode, um ein Event-Objekt zu erzeugen. Nachdem das neue event erzeugt wurde, muss es initialisiert werden. Nach der Initialisierung ist es bereit zum Absenden.

Weblinks

• W3C: dispatchEvent
• MDN: dispatchEvent