addEventListenerが私に耳を傾けるのはなぜですか？

Question

addEventListenerはなぜCANCELラベル要素と連携し、最初のものではないのですか？コンソールにエラーメッセージが表示されません。

var ctrl = document.createElement('div'); 
 
ctrl.id = 'ctrl'; 
 

 
var showhide = document.createElement('label'); 
 
showhide.id = 'showhide'; 
 
showhide.innerHTML = 'Show/hide output'; 
 
showhide.setAttribute('onclick', 'return false;'); 
 
showhide.addEventListener("click", function() { 
 
    alert('Show/hide'); 
 
}); 
 

 
var cancel = document.createElement('label'); 
 
cancel.id = 'cancel'; 
 
cancel.innerHTML = 'CANCEL'; 
 
cancel.setAttribute('onclick', 'return false;'); 
 
//document.getElementById('showhide').insertAdjacentHTML('afterEnd', cancel.outerHTML); 
 
cancel.addEventListener("click", function() { 
 
    alert('cancel'); 
 
}); 
 

 
ctrl.appendChild(showhide) 
 
ctrl.innerHTML += ' | ' 
 
ctrl.appendChild(cancel) 
 
document.body.appendChild(ctrl)

Answer 1

あなたの上記のコードでは犯人はコード実行ctrl.innerHTML += ' | ';コメントとラインで、それが正常に動作します。 innerHTMLを使用すると、コンテンツが再割り当てされ、既存のイベントが破棄されて再評価されるためです。 Here is an example explained in StackOverflow answers.