JavaScript/DOM/EventTarget/dispatchEvent

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

  • DOM 1.0
  • JavaScript 1.5
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Syntax

cancelled = !target.dispatchEvent(event)

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


[Bearbeiten] 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).

[Bearbeiten] 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);
        } else {
          if (document.createEventObject) {   // IE 7-8
            var mousedownEvent = document.createEventObject (window.event);
            mousedownEvent.button = 1;  // linke Maustaste gedrückt
            event.srcElement.fireEvent ("onmousedown", 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. Für den Internet Explorer vor Version 9 stehen die createEventObject-Methode zur Erzeugung und die fireEvent-Methode zum Absenden zur Verfügung.

Beachten Sie: Der Hauptunterschied der dispatchEvent und fireEvent-Methoden ist, dass die dispatchEvent-Methode den Standardwert des Events aufruft, die fireEvent-Methode aber nicht.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML