suchen

Heim >Web-Frontend >js-Tutorial >Wie kann ich den Verlust des Ereignis-Listeners verhindern, wenn ich innerHTML ändere?

Wie kann ich den Verlust des Ereignis-Listeners verhindern, wenn ich innerHTML ändere?

Patricia Arquette
Patricia ArquetteOriginal
2024-12-15 19:40:19534Durchsuche

How Can I Prevent Event Listener Loss When Modifying innerHTML?

Ereignis-Listener beim Anhängen an innerHTML beibehalten

Beim Zuweisen zum innerHTML eines übergeordneten Knotens können an Nachkommen angehängte Ereignishandler zerstört werden. Betrachten Sie zum Beispiel den Code unten:

<div><pre class="brush:php;toolbar:false"><span>

<script></p> <pre class="brush:php;toolbar:false">mydiv = document.getElementById(&quot;mydiv&quot;); mydiv.innerHTML += &quot;bar&quot;;</pre> <p></script&gt ;<br></pre></p> <p>Hier das Onclick-Event Der an den Span angehängte Handler, der „foo“ enthält, wird nach der Zuweisung zu mydiv.innerHTML zerstört.</p> <p>Um dieses Problem zu vermeiden, verwenden Sie die Methode .insertAdjacentHTML() anstelle von .innerHTML. Diese Methode behält Ereignis-Listener bei und wird von allen gängigen Browsern unterstützt.</p> <p><pre class="brush:php;toolbar:false">&lt;script&gt;&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;var html_to_insert = &quot;&lt;p&gt;New paragraph&lt;/p&gt;&quot;; document.getElementById('mydiv').insertAdjacentHTML('beforeend', html_to_insert);</pre> <p></script>

Das Argument „beforeend“ gibt an, wo im Element der HTML-Inhalt eingefügt werden soll. Weitere Optionen sind „beforebegin“, „afterbegin“ und „afterend“.

Das obige ist der detaillierte Inhalt vonWie kann ich den Verlust des Ereignis-Listeners verhindern, wenn ich innerHTML ändere?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html for include Event this innerHTML issue Other
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Warum aktualisiert „setState“ den Status der React-Komponente nicht sofort?Nächster Artikel：Warum aktualisiert „setState“ den Status der React-Komponente nicht sofort?

In Verbindung stehende Artikel

Mehr sehen