重新將onclicklistener附加到按鈕

Question

這個問題與關於SO的另一個問題有關。 我沒有改寫，所以請先閱讀。

在解決上述問題時，我遇到了我不知道的行為。

此代碼段有效：

 var bt1; document.addEventListener('DOMContentLoaded', load); function load() { document.body.innerHTML += '<div>welcome</div>'; bt1 = document.getElementById('bt1'); bt1.onclick = clicked; } function clicked(a) { document.body.innerHTML += '<div>welcome</div>'; // getting the button from document.getElement method bt1 = document.getElementById('bt1'); bt1.onclick = clicked; }

 <body> <button id="bt1">Click Me</button> </body>

雖然這不是：

 var bt1; document.addEventListener('DOMContentLoaded', load); function load() { document.body.innerHTML += '<div>welcome</div>'; bt1 = document.getElementById('bt1'); bt1.onclick = clicked; } function clicked(a) { document.body.innerHTML += '<div>welcome</div>'; // getting the button from event.target var b = a.target; b.onclick = clicked; }

 <body> <button id="bt1">Click Me</button> </body>

任何見解都將有助於清除概念。

Answer 1

在單擊的函數bt1重新創建bt1按鈕a.target指向舊按鈕，而不是新按鈕。

該行document.body.innerHTML += '<div>welcome</div>'; 不僅將div附加到主體，還設置了完整主體的innerHTML，這將導致主體內的所有元素再次被初始化。 在第一個代碼示例中，您通過id檢索了新創建的按鈕（因為在innerHTML賦值之后調用了getElementById），但是在第二個示例中，引用了舊按鈕，該按鈕不再顯示在瀏覽器中。

這種將內容附加到主體的方法是一種代碼味道，因為瀏覽器必須在主體內部重新創建任何內容。 更好的解決方案是使用appendChild API。 這樣，就不會重新創建按鈕，並且您不必重新附加事件偵聽器：

var bt1;
document.addEventListener('DOMContentLoaded', load);

function load() {
  document.body.innerHTML += '<div>welcome</div>';
  bt1 = document.getElementById('bt1');
  bt1.onclick = clicked;
}

function clicked(a) {
  var newDiv = document.createElement('div');
  newDiv.textContent = 'welcome';
  document.body.appendChild(newDiv);
}

Answer 2

Element.innerHTML替換給定DOM元素中的所有內容。

要將HTML插入文檔中而不是替換元素的內容，請使用Element.insertAdjacentHTML（）方法，該方法將允許您以所需的方式使用target屬性。

 var bt1; document.addEventListener('DOMContentLoaded', load); function load() { document.body.innerHTML += '<div>welcome</div>'; bt1 = document.getElementById('bt1'); bt1.onclick = clicked; } function clicked(a) { console.log(a.srcElement); document.body.insertAdjacentHTML('beforeend', '<div>welcome</div>'); // getting the button from event.target var b = a.target; b.onclick = clicked; }

 <body> <button id="bt1">Click Me</button> </body>

重新將onclicklistener附加到按鈕

問題描述

2 個解決方案

解決方案1
1 已采納 2018-11-13 08:15:49

解決方案2
1 2018-11-13 08:35:14

重新將onclicklistener附加到按鈕

問題描述

2 個解決方案

解決方案1 1 已采納 2018-11-13 08:15:49

解決方案2 1 2018-11-13 08:35:14

解決方案1
1 已采納 2018-11-13 08:15:49

解決方案2
1 2018-11-13 08:35:14