重新将onclicklistener附加到按钮
[英]Reattaching the onclicklistener to the button
问题描述
This question is related to another question on SO . 
这个问题与关于SO的另一个问题有关 。 I am not rephrasing it so please read that first. 我没有改写，所以请先阅读。
In solving the above problem I encountered a behaviour that is unknown to me. 在解决上述问题时，我遇到了我不知道的行为。
This snippet works: 此代码段有效：
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>
While this doesn't: 虽然这不是：
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>
Any insights would help to clear the concepts. 任何见解都将有助于清除概念。
2 个解决方案
解决方案1
1 已采纳 2018-11-13 08:15:49
The bt1 button gets re-created in the clicked function - and a.target points to the old button, not the new one. 在单击的函数bt1重新创建bt1按钮a.target指向旧按钮，而不是新按钮。
The line document.body.innerHTML += '<div>welcome</div>'; 该行document.body.innerHTML += '<div>welcome</div>'; doesn't just append a div to the body, but sets the innerHTML of the complete body which causes all elements inside body to be initialized again. 不仅将div附加到主体，还设置了完整主体的innerHTML，这将导致主体内的所有元素再次被初始化。 In your first code sample you retrieve the newly created button by the id (because getElementById is called after the innerHTML assignment), but in the second sample the old button is referenced which isn't the one displayed on the browser anymore. 在第一个代码示例中，您通过id检索了新创建的按钮（因为在innerHTML赋值之后调用了getElementById），但是在第二个示例中，引用了旧按钮，该按钮不再显示在浏览器中。
This method of appending stuff to the body is a code smell, because the browser has to recreate anything inside the body. 这种将内容附加到主体的方法是一种代码味道，因为浏览器必须在主体内部重新创建任何内容。 A better solution would be to use the appendChild API. 更好的解决方案是使用appendChild API。 By doing so, the button doesn't get re-created and you don't have to re-attach the event listener: 这样，就不会重新创建按钮，并且您不必重新附加事件侦听器：
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);
}
解决方案2
1 2018-11-13 08:35:14
Element.innerHTML replaces everything within a given DOM element. Element.innerHTML替换给定DOM元素中的所有内容。
To insert the HTML into the document rather than replace the contents of an element, use the method Element.insertAdjacentHTML() which will allow you to work with the target attribute in the way you want. 要将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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.