Wie kann ich Ereignis-Listener beibehalten, wenn ich das innerHTML eines DOM-Knotens aktualisiere?

Ereignis-Listener beim Ändern von innerHTML beibehalten

Bei der Zuweisung zum innerHTML eines DOM-Knotens werden alle Ereignis-Listener, die an untergeordnete Elemente angehängt sind, zerstört. Dies kann problematisch sein, wenn zusätzliche Inhalte angehängt werden sollen, ohne die vorhandene Ereignisverarbeitung zu beeinträchtigen.

Lösung: insertAdjacentHTML

Die Methode .insertAdjacentHTML() bietet eine Lösung, die den Inhalt beibehält Ereignis-Listener beim Ändern von innerHTML. Durch Angabe des Speicherorts des eingefügten Inhalts mithilfe von „afterend“ ist es möglich, Inhalte anzuhängen, ohne die vorhandene DOM-Struktur oder ihre Ereignishandler zu beeinträchtigen.

Beispiel:

Bedenken Sie Das folgende Code-Snippet:

var mydiv = document.getElementById('mydiv');

// Appending content using .innerHTML (destroys event listeners)
mydiv.innerHTML += '<p>New paragraph</p>';

// Appending content using .insertAdjacentHTML (preserves event listeners)
mydiv.insertAdjacentHTML('beforeend', '<p>New paragraph</p>');

In diesem Beispiel wurde die Methode .insertAdjacentHTML() erfolgreich ausgeführt Hängt einen neuen Absatz an das #mydiv-Element an und behält dabei die vorhandenen Ereignis-Listener bei. Dieser Ansatz kann auf jedes DOM-Element angewendet werden, das eine Inhaltsänderung erfordert, ohne die Ereignisbehandlung zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie kann ich Ereignis-Listener beibehalten, wenn ich das innerHTML eines DOM-Knotens aktualisiere?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!