innerHTML與button事件衝突解決辦法
阿新 • • 發佈：2018-11-06
事情描述，我在body裡面寫了如下一個button
<body>
<input id="btn" type="button" value="自動生成V提高版本">
</body>然後在js裡面獲取了這個button,然後給它新增點選事件
var btn = document.getElementById('btn'); btn.onclick = function () { console.log(1); for (var i = 0; i < 5; i++) { html += '<div>' + i + '</div>'; } document.body.innerHTML += html; }
然而我要實現下面這樣的功能，那我得重複點選這個按鈕，but，當我完善完功能之後，發現我上面程式碼這隻能點選一次，控臺列印怎麼點也只有一個1，好吧。。。。查了一下貌似document.body.innerHTML += html; 這句會導致這個body頁面重新渲染，這樣原來的DOM結構被覆蓋了，之前DOM節點的繫結事件也就消失了，點不到之前那個button自然點選也就沒反應了。
解決辦法：
如此那我就把這個點選事件用事件代理的方法放在body上，來看看，直接上程式碼
document.body.onclick = function (ev) { var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() != 'input'){ //判斷下點選的是我那個button，不是就什麼也不做 return; }
這樣就直接解決了問題了，當然，為了減少瀏覽器負擔，我還是把生成div那用一個開關控制下只跑一次就不讓它進來了
if(onOff == false){
for (var i = 0; i < 5; i++) {
html += '<div>' + i + '</div>';
}
document.body.innerHTML += html;
onOff = true;
}