重新将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