代码之家 › 专栏 › 技术社区 › HAK

将onclicklistener重新附加到按钮

onclicklistener onclick html javascript

HAK · 技术社区 · 6 年前

这个问题与另一个有关 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;
}

<车身>
<按钮id=“bt1”>单击我</按钮>
</车身>

2 回复 | 直到 6 年前

Johannes Reuter 6 年前

这个 bt1 在单击的函数中重新创建按钮-并且 a.target 指向旧按钮,而不是新按钮。

document.body.innerHTML += '<div>welcome</div>'; 不只是将div附加到body,而是设置整个body的innerHTML,从而使body中的所有元素再次初始化。在第一个代码示例中,您通过id检索新创建的按钮(因为getElementById是在innerHTML赋值之后调用的),但在第二个示例中,引用的是旧按钮,它不再显示在浏览器上。

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

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

Mamun 6 年前

Element.innerHTML

Element.insertAdjacentHTML() 这样你就可以和目标

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>

推荐文章

Kylo Ren · 在具有背景项的透明布局上单击侦听器单击启用

6 年前

user9357066 · 单击整个屏幕

6 年前

Jithin Pavithran · 如何结合listener类和view类安卓

6 年前

Janitha Prabath Madushanka · 将onclick侦听器添加到工具栏上的图标[复制]

6 年前

Novice · Android onClickListener只工作一次,按钮第二次不工作

6 年前

johnchar · 使用javascript添加的类获取元素

7 年前

CHarris · 尝试使我的全选/清除所有按钮选中和取消选中复选框

7 年前

leedwon · 使用按钮的onClickListener更改textview上的文本

7 年前

Maxcot · 每个类都必须有自己的OnClickListener吗?

7 年前

Mox_z · 如何在我的回收器视图中为自定义ViewHolder实现OnClickListener?

7 年前