Question

我浏览了其他答案，但无法找到解决此问题的方法。

我有这个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);

Answer 1

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

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

JSFiddle demonstrating this

但是说你出于某种原因不想这样做 - 也许你无法控制动态创建按钮的功能。在这种情况下，您可以使用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);

请参阅this JSFiddle。

Answer 2

您可以使用事件委派：

document.querySelector('body').on('click', function() {
    //You need to identify the new elements here......
});

我创建了一个jsfiddle：jsfiddle

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

2 个答案: