向动态创建的按钮添加事件侦听器

Add event listener to dynamically created button

本文关键字：添加 事件 侦听器 按钮 动态 创建      更新时间：2023-09-26

我浏览了其他答案，但没有找到这个问题的解决方案。

我有这个HTML: 
<body>
  <h1>Javascript in the Browser</h1>
  <div id="removeReference">
  </div>
  <div>
    <p>This page looks a little sad without any style...</p>
    <button id="styleButton">Apply some style!</button>
  </div>
  <div id="imagePlaceholder">
  </div>
<script src="script.js"></script>
</body>

在JavaScript文件中，我有一个函数stylePage，通过单击按钮触发，它添加一些样式，删除按钮本身，并创建一个新按钮。在这一点上，我想为这个动态创建的新按钮添加一个事件，以便当单击createImage时触发函数。

我知道最好使用库，但这是一个尝试自学JavaScript。我认为也许有可能从stylePage返回按钮并将事件侦听器添加到返回值，但这不起作用。任何建议都非常感激，谢谢!

function stylePage(){
  var body = document.getElementsByTagName("body");
  body[0].style.backgroundColor = "rgb(214, 214, 214)";
  body[0].style.color = "#778899";
  body[0].style.fontFamily = "Courier";
  body[0].style.textAlign = "center";
  var remove = document.getElementById("removeReference");
  remove.nextElementSibling.remove();
  var newButton = document.createElement("button");
  var newContent = document.createTextNode("Not enough?");
  newButton.appendChild(newContent);
  document.body.insertBefore(newButton, remove);
};
function createImage(){
  var img = document.createElement("img");
  img.src = "pepsi_dog_by_werelyokoman.jpg";
  document.getElementById("imagePlaceholder").appendChild(img);
}
var button = document.getElementsByTagName("button");
button[0].addEventListener("click", stylePage);
//??? reference to newButton ??? .addEventListener("click", createImage);

最简单的方法是将.addEventListener添加到stylePage函数的末尾:

  var newContent = document.createTextNode("Not enough?");
  newButton.appendChild(newContent);
  document.body.insertBefore(newButton, remove);
  newButton.addEventListener("click", createImage);    
};

JSFiddle演示这个。

但是假设你不想这样做，因为某些原因——也许你无法控制动态创建按钮的函数。在这种情况下，您可以使用MutationObserver来监视DOM中的变化。

你可以这样做:

var target = document.getElementsByTagName('body')[0];
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if(mutation.addedNodes.length > 0 && mutation.addedNodes[0].firstChild.nodeValue == "Not enough?") {
       mutation.addedNodes[0].addEventListener("click", createImage);
    }
  });    
});
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);

您可以使用事件委托:

document.querySelector('body').on('click', function() {
    //You need to identify the new elements here......
});
我创建了一个jsfiddle: jsfiddle
相关文章：