document.addEventListener 與 element.addEventListener 的問題

Question

我正在處理我編寫的一些代碼，我遇到了這個問題，我將一個 eventListener 添加到一個動態創建的元素中，但它不會“觸發”又名工作。

var eleButton = document.createElement("button");
eleButton.innerText="Post";
eleButton.type="submit";
...
eleButtonContainer.appendChild(eleButton);

事件監聽器是一個基本的“點擊”

eleButton.addEventListener("click", function() {
    console.log("Hello World");
});

那沒有用，所以我四處尋找，找不到任何答案。 我終於找到了使用文檔並檢查該元素是否被檢查的解決方法。 所以我得到的代碼變成了這樣：

var eleButton = document.createElement("button");
eleButton.innerText="Post";
eleButton.type="submit";
eleButton.id = "usrResponseSubmit";

console.log(eleButton);
document.body.addEventListener('click',function(){
   if(event.target.id == "usrResponseSubmit"){
       console.log("ok now it works");
   }
});

這很好用，但它仍然讓我對上面的代碼產生疑問。 我願意采取“如果它可行的話”路線，但我仍然想使用 eleButton.addEventListener 路線，因為那是我一直使用的。

所以我的兩個問題是：

1. 使用 document.addEventListener 不好？
2. 為什么 eleButton.addEventListner 不起作用？

在你說之前，但它適用於我，我的代碼有點垃圾而且很長。 本質上，我將這個 eleButton 嵌套在一個容器中，該容器嵌套在一個容器中......（x~10-20）。 我認為這不一定是問題所在。 但我也有一些其他的事件監聽器“可能”覆蓋 eleButton。 我不太確定情況是否如此，因為我一直在嘗試和測試我所能做的一切。

我還拉出 eleButton 並將其附加到現有對象並且事件確實觸發了。 有人可以告訴我事件何時不觸發嗎？

Answer 1

您的代碼沒有任何問題，也許您只是拼錯了一些東西。 在這里，我做了一個代碼筆示例，您可以查看。

html:
<div id="btnCon"></div>

...

JS:
const eleButtonContainer = document.querySelector('#btnCon')

var eleButton = document.createElement("button");
eleButton.innerText="Post";
eleButton.type="submit";

eleButtonContainer.appendChild(eleButton);

eleButton.addEventListener("click", function() {
    console.log("Hello World");
});

codepen 上的示例