为什么在使用element.innerHTML之后事件侦听器会停止工作？ [英] Why can event listeners stop working after using element.innerHTML?

查看：78
本文介绍了为什么在使用element.innerHTML之后事件侦听器会停止工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是JavaScript的初学者。一本JavaScript书中说 element.innerHTML 的缺点之一是：


Event处理程序可能不再按预期工作。


我不明白这是什么意思。有人可以举个例子吗？

解决方案

最有可能的是，它指的是某些人在最后插入HTML的技术： 

  element.innerHTML + =插入的HTML;

这将获得当前的HTML，将其与插入的HTML连接起来，然后进行全部解析。



作为副作用，现有元素的所有内部状态（如事件侦听器，检查状态等）都将丢失。



  var btn = document.querySelector（ button）; btn.addEventListener（ click，function（）{btn.textContent =我赢了'不再工作了；; document.body.innerHTML + =< p>插入的文本< / p>;}）;  

 < button>点击我以插入HTML< / button>



相反，如果要在元素的末尾插入一些HTML，可以使用

  element.insertAdjacentHTML（'beforeend'，插入的HTML）;

这将保留现有元素。



  var btn = document.querySelector（ button）; btn.addEventListener（ click，function（）{btn.textContent =我还在工作；文档。 body.insertAdjacentHTML（ beforeend，< p>插入的文本< / p>）;}）;  

 < button>点击我插入HTML< / button>

p>

另一种选择是，如果您不介意将插入的内容包装在元素内，则使用 appendChild ：



  var btn = document.querySelector（ button）; btn .addEventListener（ click，function（）{btn.textContent =我还在工作; var wrapper = document.createElement（’div’）; wrapper.innerHTML =&p; gt;插入的文本< / p>; document.body.appendChild（wrapper）;}）;  

  < button>单击我插入HTML< / button>


I am a beginner in JavaScript. A JavaScript book says that one of disadvantages of element.innerHTML is:

Event handlers may no longer work as intended.

I can't understand what this mean. Can someone give me an example?

解决方案

Most probably, it refers to the technique some people use to insert HTML at the end:

element.innerHTML += "inserted HTML";

This will get the current HTML, concatenate it with the inserted one, and parse it all.

As a side effect, all the internal state of the existing elements (like event listeners, checkedness, ...) will be lost.

var btn = document.querySelector("button");
btn.addEventListener("click", function() {
  btn.textContent = "I won't work anymore";
  document.body.innerHTML += "<p>Inserted text</p>";
});

<button>Click me to insert HTML</button>

Instead, if you want to insert some HTML at the end of an element, you can use

element.insertAdjacentHTML('beforeend', "inserted HTML");

This will preserve the existing elements.

var btn = document.querySelector("button");
btn.addEventListener("click", function() {
  btn.textContent = "I still work";
  document.body.insertAdjacentHTML("beforeend", "<p>Inserted text</p>");
});

<button>Click me to insert HTML</button>

Another alternative, if you don't mind the inserted content to be wrapped inside an element, is using appendChild:

var btn = document.querySelector("button");
btn.addEventListener("click", function() {
  btn.textContent = "I still work";
  var wrapper = document.createElement('div');
  wrapper.innerHTML = "<p>Inserted text</p>";
  document.body.appendChild(wrapper);
});

<button>Click me to insert HTML</button>

这篇关于为什么在使用element.innerHTML之后事件侦听器会停止工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆