Question

该问题与另一个question on 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按钮-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 属性。

   x     a       b       c
0   1   10.0    100.0   101.0
1   2   12.0    100.0   101.0
5   3   12.0    120.0   122.0
2   4   13.0    130.0   132.0
3   5   14.0    130.0   132.0
6   7   14.0    140.0   142.0
4   8   15.0    140.0   142.0
7   9   15.0    150.0   151.0
8   12  15.0    160.0   152.0

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

重新将onclicklistener附加到按钮

2 个答案: