bei einer select (Auswahlbox) das bearbeiten erkennen
bearbeitet vonHallo
> 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 …
~~~ javascript
// 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 Elternelementen 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`{: .language-javascript}. 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:
~~~ javascript
// 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