addEventListener fügt Ereignis nicht zum Element hinzu

[Michael R.]

Liebes Forum,

das nachfolgende Problem bereitet mir schon einige Tage Kopfzerbrechen und ich finde selber leider keine Lösung:

function erzeugeElement (strName, strText, strClass, arrayEventListe){
    var elm = document.createElement(strName);
    
    elm.setAttribute('id', strId);
    
    elm.innerHTML += strText;

    elm.setAttribute('class', strClass);

/*
arrayEventListe = array aus Objekten der Form

{
  eventName: 'click',
  eventCode: (function (event){console.log(event);})
}
*/

    elm.addEventListener(arrayEventListe[0].eventName, arrayEventListe[0].eventCode, false);

   return elm;

Soweit der verkürzte Auszug aus dem Javascript - gekürzt sind if-Zeilen, um zu prüfen, ob die Parameter vorhanden und gültig sind.

Um den Code für den addEventListener befindet sich eine for-Schleife, die über alle array-Element hinweg geht.

Ergebnis ist leider, dass das Element zwar korrekt mit allen Eigenschaten (id, class, etc.) erzeugt und zurückgebe wird und dann auch im Dokument an richtiger Stelle erscheint.

Nur fehlt das per addEventListener hinzugefügte Ereignis. Das existiert einfach nicht. Woran kann das liegen?

Danke für jegliche Hilfe..

Pre-PS: ich nutze Firefox :-)

Grüße Michael

[MudGuard]

Hi,

das nachfolgende Problem bereitet mir schon einige Tage Kopfzerbrechen und ich finde selber leider keine Lösung:

function erzeugeElement (strName, strText, strClass, arrayEventListe){
    var elm = document.createElement(strName);
    elm.addEventListener(arrayEventListe[0].eventName, arrayEventListe[0].eventCode, false);
   return elm;

IIRC kann ein event-Listener erst hinzugefügt werden, wenn das Element im DOM eingehängt ist.

Wann geschieht das?

Vor oder nach dem Eventhandler-Anhängen?

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo Michael,

(Parallelpost 😉)

ich habe gerade keine Möglichkeit zum ausprobieren... Kann es sein, dass addEventListener nur wirkt, wenn das Element im DOM ist? Dein Code bereitet es ja „nur“ für den DOM-Insert vor. Ansonsten sieht dein Code nicht falsch aus. Ein for() um das Eventliste-Array gibt's bei dir sicherlich noch, oder? Sonst wäre das Array hyperliquid.

Gibt's irgendwelche Meldungen in der Browser-Console?

Die Frage ist aber auch, ob es die beste Lösung ist, Eventhandler auf (möglicherweise viele) dynamisch erzeugte Elemente zu registrieren. Hast Du die Nutzung von Bubbling in Erwägung gezogen? Wenn ich Teile des DOM per JS generiere, registriere ich die Eventhandler immer auf dem Container, in dem das generierte DOM landet, und lasse die Events dahin blubbern.

Rolf

[JürgenB]

Hallo,

@Andreas und Rolf,

bei mir funktioniert es, wenn der Eventhandler angehängt wird, bevor das Element im DOM ist:

	var figure = document.createElement("dialog"); // Hier kommt die Grafik rein
   ...
	var button = document.createElement("button"); // Close-Button
   ... 
	button.onclick = function() { 
    ... 
	}
	figure.appendChild(button);
	document.body.appendChild(figure);

@michael

elm.addEventListener(arrayEventListe[0].eventName, arrayEventListe[0].eventCode, false);

was steht denn in arrayEventListe[0].eventCode? Der Name lässt mich vermuten, das das ein String mit Quellcode ist.

Ein Link zum Beispielcode wäre hilfreich.

Gruß
Jürgen

[Rolf B]

Hallo Jürgen,

1. du verwendest onclick und nicht addEventListener. Das mag sich anders verhalten.
2. Der Kommentar im Eingangsposting zeigt, dass da ein function Objekt steht. Es steht zwar in Klammern, aber das sollte irrelevant sein.

Rolf

[Michael R.]

Hallo,

danke für die bisherigen Beiträge!

Das erzeugte Element wird danach im DOM eingefügt.

Der in eventCode übergebene Code sieht so aus:

(function (event){console.log(event);})

In der Console wird leider nichts, auch keine Fehlermeldung ausgegeben. Die Zeile mit dem EventListener wird einfach ignoriert, selbst wenn ich es so umformuliere:

element.addEventListener('click', (function (event){console.log(event)}), false);

Auch die obige Zeile wird nicht ausgeführt???

Füge ich die Ereignisse aber mit

element.setAttribute('onclick', eventCode);

hinzu, passt alles.

Sehr seltsam …

Viele Grüße Michael