Javascript 将onclicklistener重新连接到按钮

这个问题与另一个问题有关。我不是在重新措辞，所以请先读一读

在解决上述问题时，我遇到了一种我不知道的行为

此代码段适用于：

var-bt1；
document.addEventListener（'DOMContentLoaded'，load）；
函数加载（）{
document.body.innerHTML+=‘欢迎’；
bt1=document.getElementById（'bt1'）；
bt1.onclick=单击；
}
功能（a）{
document.body.innerHTML+=‘欢迎’；
//从document.getElement方法获取按钮
bt1=document.getElementById（'bt1'）；
bt1.onclick=单击；
}

点击我

在单击的函数中重新创建

bt1

按钮，并且

a.target

指向旧按钮，而不是新按钮

行

document.body.innerHTML+='welcome'

不只是在正文中附加一个div，而是设置整个正文的innerHTML，这将导致再次初始化正文中的所有元素。在第一个代码示例中，您通过id检索新创建的按钮（因为getElementById是在innerHTML赋值之后调用的），但在第二个示例中，引用的是旧按钮，它不再显示在浏览器上

这种将内容附加到主体的方法是一种代码味道，因为浏览器必须在主体内部重新创建任何内容。更好的解决方案是使用

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);
}

var-bt1；
document.addEventListener（'DOMContentLoaded'，load）；
函数加载（）{
document.body.innerHTML+=‘欢迎’；
bt1=document.getElementById（'bt1'）；
bt1.onclick=单击；
}
功能（a）{
var newDiv=document.createElement（'div'）；
newDiv.textContent='welcome'；
文件.body.appendChild（newDiv）；
}

在单击的函数中重新创建

bt1

按钮，并且

a.target

指向旧按钮，而不是新按钮

行

document.body.innerHTML+='welcome'

不只是在正文中附加一个div，而是设置整个正文的innerHTML，这将导致再次初始化正文中的所有元素。在第一个代码示例中，您通过id检索新创建的按钮（因为getElementById是在innerHTML赋值之后调用的），但在第二个示例中，引用的是旧按钮，它不再显示在浏览器上

这种将内容附加到主体的方法是一种代码味道，因为浏览器必须在主体内部重新创建任何内容。更好的解决方案是使用

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);
}

var-bt1；
document.addEventListener（'DOMContentLoaded'，load）；
函数加载（）{
document.body.innerHTML+=‘欢迎’；
bt1=document.getElementById（'bt1'）；
bt1.onclick=单击；
}
功能（a）{
var newDiv=document.createElement（'div'）；
newDiv.textContent='welcome'；
文件.body.appendChild（newDiv）；
}

替换给定DOM元素中的所有内容

要将HTML插入文档而不是替换元素的内容，请使用允许您以所需方式处理目标属性的方法

var-bt1；
document.addEventListener（'DOMContentLoaded'，load）；
函数加载（）{
document.body.innerHTML+=‘欢迎’；
bt1=document.getElementById（'bt1'）；
bt1.onclick=单击；
}
功能（a）{
log（a.src元素）；
document.body.insertAdjacentHTML（'beforeed'，'welcome'）；
//从event.target获取按钮
var b=a.目标；
b、 onclick=单击；
}

点击我

替换给定DOM元素中的所有内容

要将HTML插入文档而不是替换元素的内容，请使用允许您以所需方式处理目标属性的方法

var-bt1；
document.addEventListener（'DOMContentLoaded'，load）；
函数加载（）{
document.body.innerHTML+=‘欢迎’；
bt1=document.getElementById（'bt1'）；
bt1.onclick=单击；
}
功能（a）{
log（a.src元素）；
document.body.insertAdjacentHTML（'beforeed'，'welcome'）；
//从event.target获取按钮
var b=a.目标；
b、 onclick=单击；
}

点击我

这就是最初的问题。我的问题不一样。@HAK，我已经试着演示了…使用innerHTML和target的问题…明白了。谢谢。这就是最初的问题。我的问题不一样。@HAK，我已经试着演示了…使用innerHTML和target的问题…明白了。谢谢