bei einer select (Auswahlbox) das bearbeiten erkennen

[Orlok]

Hallo

wie kann ich es lösen, das ich per event erkennen kann ob die "select-box" gerade beim auswählen ist. d.h. ich möchte erkennen ob die Auswahlbox geöffnet ist und ein event das die Auswahl abgeschlossen ist.

Das Ereignis focus wird ausgelöst, wenn das select angewählt ist …

// wenn die Seite fertig geparst ist und alle Elemente als Objekt zur Verfügung stehen ...
window.addEventListener('DOMContentLoaded', function ( ) {

  // registriere für das Body-Element und das Ereignis focus einen Event-Listener
  document.body.addEventListener('focus', function (event) {

    // speichere das Element, das den Fokus bekommen hat in der Variable target
    var target = event.target;

    // und wenn es sich dabei um ein select-Element handelt ...
    if (target.tagName == 'SELECT') {

      // mache irgendwas damit
    }

  // die Angabe true für die Capturing-Phase nicht vergessen,
  // da focus nicht im DOM aufsteigt
  }, true);

});

Bedenke, dass es nicht notwendig ist, für jedes Element einen Eventhandler zu registrieren, da die Ereignisse innerhalb der Baumstruktur des DOM propagieren. Das Ereignis focus kann jedoch nur auf seinem Weg von den Vorfahrenelementen hin zum Zielelement, oder auf dem Zielelement selbst abgefangen werden, also nur in der Capturing-Phase und der Target-Phase des Ereignisses.

Darum folgt hier hinter der Handlerfunktion die Notierung von true. Diese sorgt dafür, dass die Handlerfunktion aufgerufen wird, obwohl sie nicht für die potentiellen Zielelemente selbst, sondern für deren Vorfahrenelement body registriert wurde. Innerhalb der Funktion kannst du dann wie im obigen Beispiel über bedingte Anweisungen entsprechend selektieren.

Wenn du wissen willst, ob eine Auswahl getroffen wurde, beziehungsweise ob die bisherige Auswahl verändert wurde, dann bietet sich die Überwachung des Ereignisses change an:

// registriere einen globalen Eventhandler für das Ereignis change
document.body.addEventListener('change', function (event) {

  // hinterlege das Element, bei welchem das Ereignis ausgelöst wurde,
  // in der Variable mit dem Bezeichner target ...
  var target = event.target;

  // und wenn es sich dabei um ein select-Element handelt ...
  if (target.tagName == 'SELECT') {

    // speichere die aktuelle Auswahl in der Variable selected
    var selected = target.value;

    // ... und mach irgendwas damit
    console.info(selected);
  }

});

Hier ist nun keine Angabe zur Ereignisphase bei der Argumentübergabe nötig, da das Ereignis change im Gegensatz zu focus, nachdem es das Zielelement passiert hat, die Kette seiner Vorfahrenelemente entlang wieder in Richtung globales Objekt (window) propagiert und es auf dem Weg dahin von dem für body registrierten Handler abgefangen werden kann.

Viele Grüße,

Orlok