用於新html元素的舊javascript函數

Question

現有的（純）javascript函數不適用於新的html元素（在該函數之后創建）：

 document.querySelector('li').onmouseover = function() { document.querySelector("li").innerHTML ="Hai soffermato il mouse qui!"; } document.querySelector('li').onmouseout = function() { document.querySelector("li").innerHTML ="Sofferma il mouse qui"; } document.getElementById('bottone1').onclick = function() { var Lista = document.getElementById('lista'); var NuovoElemento = document.createElement('li'); NuovoElemento.innerText = 'Nuova voce'; // innerHTML Lista.insertBefore(NuovoElemento, Lista.lastChild); } 

 <p><b>Elenco puntato:</b></p> <ol id="lista"> <li>Sofferma il mouse qui</li> </ol> <button id="bottone1">Aggiungi voce</button> 

是的 ，我知道（但是不好，恕我直言）。 但是，對不起，我不明白該線程能解決問題（widthout解釋了這一問題）:-( 創建新的HTML元素時Javascript函數不起作用

謝謝（更多solito）。

Answer 1

您可以通過應用事件委托的概念來解決此問題。 這意味着您在父元素而不是li元素上監聽鼠標事件。 為此，您需要查詢傳遞給回調函數的事件對象，並檢查源自鼠標事件的原始元素確實是li元素：

 document.getElementById('lista').onmouseover = function(e) { if (e.target.tagName !== 'LI') return false; e.target.textContent ="Hai soffermato il mouse qui!"; } document.getElementById('lista').onmouseout = function(e) { if (e.target.tagName !== 'LI') return false; e.target.textContent ="Sofferma il mouse qui"; } document.getElementById('bottone1').onclick = function() { var Lista = document.getElementById('lista'); var NuovoElemento = document.createElement('li'); NuovoElemento.textContent = 'Nuova voce'; Lista.insertBefore(NuovoElemento, Lista.lastChild); } 

 <p><b>Elenco puntato:</b></p> <ol id="lista"> <li>Sofferma il mouse qui</li> </ol> <button id="bottone1">Aggiungi voce</button> 

請注意，我還介紹了textContent屬性的使用，該屬性在分配純文本時會在innerHTML之上得到支持，以避免某些字符串否則可能具有的副作用（帶有<和& ）。

Answer 2

用lastElementChild替換lastChild應該可以工作

檢查以下代碼段

 window.onload = function() { document.querySelector('li').onmouseover = function() { document.querySelector("li").innerHTML = "Hai soffermato il mouse qui!"; } document.querySelector('li').onmouseout = function() { document.querySelector("li").innerHTML = "Sofferma il mouse qui"; } document.getElementById('bottone1').onclick = function() { var Lista = document.getElementById('lista'); var NuovoElemento = document.createElement('li'); NuovoElemento.innerText = 'Nuova voce1'; // innerHTML Lista.insertBefore(NuovoElemento, Lista.lastElementChild); } } 

 <p><b>Elenco puntato:</b> </p> <ol id="lista"> <li>Sofferma il mouse qui</li> </ol> <button id="bottone1">Aggiungi voce</button> 

希望這可以幫助