Event weiterleiten ...

[heinetz]

Hallo Forum,

für ich hatte mal folgendes Markup:

<select class="my_select">
 <option></option>
 …
</select>

... ein Script geschrieben

document.querySelector('.my_select').addEventListener('change', e => {
 ... do something
});

Nun hat sich das Markup geändert …

<div class="my_select">
 <select class="my_select_form_element">
  <option></option>
  …
 </select>
</div>

Wie kann ich (mit einem zusätzlichen Script) dafür sorgen, dass mein Script nach wie vor funktioniert? Oder mit andern Worten: Ich möchte in meinem zusätzlichen Script so etwas definieren wie:

document.querySelector('.my_select > select').addEventListener('change', e => {
 ... send e to parentselector .my_select
});

Ist das verständlich?

danke und Gruss, heinetz

[Felix Riesterer]

Lieber heinetz,

Du hast eine neue DOM-Struktur und willst, dass ein JavaScript, das nicht für sie geschrieben wurde, trotzdem mit ihr funktioniert.

Warum sollte man das wollen? Warum passt man nicht das JavaScript an?

Liebe Grüße,

Felix Riesterer.

[Rolf B]

Hallo heinetz,

wenn Du den change-Handler unverändert auf dem .my_select Element registrierst, landen die Change-Events auch weiterhin dort. Das "Send to parent" erledigt das DOM automatisch, das ist das Event-Bubbling.

Aber ich glaube, wir stehen hier vor einem A-B Problem, oder XY-Problem wenn man danach sucht.

Also: Leg mal Y beiseite und erzähle uns von X. Vielleicht können wir Dir dann besser helfen.

Rolf

[heinetz]

Hallo Rolf,

das Ganze hatte aus einem anderen Grund nicht funktioniert. Hab's repariert und dann hatte es sich über Event-Bubbling erledigt.

gruss, heinetz