如果我不知道何时创建 HTML 元素，如何向它们添加事件侦听器？答案

【问题标题】：How do I add event listeners to HTML elements if I do not know when they will be created?如果我不知道何时创建 HTML 元素，如何向它们添加事件侦听器？
【发布时间】：2026-01-16 20:20:03
【问题描述】：

我想在我的网页中将我的代码与我的 UI 分开，我想知道我是否可以使用一个事件来告诉我是否创建了一个元素，以便我可以在以下位置为其分配一个事件处理程序它的创建时间。

例如，如果我有两个元素，并且每个元素都有事件处理程序，我如何知道这些元素何时创建并添加它们？

到目前为止，我所做的是将文档的侦听器添加到addElement 事件（如果存在）。不知道有没有。如果是，请检查该元素是否与函数字典中的任何现有 id 匹配。所以是这样的：

来自单独脚本文件的代码：

<script>
    // event handler for BorderContainer1282
    function doSomething1() {
    
    }
    
    // event handler for Button925
    function doSomething2() {
    
    }
    
    var clickHandlersDictionary = {};
    clickHandlersDictionary["BorderContainer1282"] = doSomething1;
    clickHandlersDictionary["Button925"] = doSomething2;
    
    
    function createComplete() {
        document.addEventListener("added", addElementEventHandlers);
    }
    
    function addElementEventHandlers(event) {
        var element = event.currentTarget;
    
        if (clickHandlersDictionary[element.id]!=null) {
            element.addEventListener("click", clickHandlersDictionary[element.id]);
        }
    }
</script>

还有 HTML：

<body onReadyState="creationComplete()">
    <div id="BorderContainer1282">
        <input id="Button925" type="button" value="Button">
    </div >
</body>

我认为我可能正在尝试做的是依赖注入，但我不确定。我最终可能会尝试支持状态，并且在创建 HTML 元素时需要添加和删除案例事件侦听器。

【问题讨论】：

标签： javascript html dependency-injection event-handling dom-events

【解决方案1】：

您可以使用MutationObserver。 MutationObservers 允许您检测对 DOM 的更改并做出相应的反应。

以以下为例：

/*****
Setting up some of your code
*****/
function doSomething1() {
  console.log('Do something 1');
}

function doSomething2() {
  console.log('Do something 2');
}

var dictionary = {
  BorderContainer1282: doSomething1,
  Button925: doSomething2
};

/*****
Setting up the observer
*****/
// select the target node
var target = document.getElementById('target');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    Object.keys(dictionary).forEach(function(key) {
      var query = target.querySelector('#' + key);
      if (query) {
        query.addEventListener('click', dictionary[key]);
      }
    });
  });
});

// pass in the target node, as well as the observer options
observer.observe(target, {
  childList: true
});

/*****
Just adds to the DOM when you click on the button
*****/
function addToDom(button) {
  button.parentNode.removeChild(button);
  var parentDiv = document.createElement('div');
  parentDiv.textContent = 'Parent';

  var childDiv1 = document.createElement('div');
  childDiv1.textContent = 'BorderContainer1282 (Click Me)';
  childDiv1.id = 'BorderContainer1282';

  var childDiv2 = document.createElement('div');
  childDiv2.textContent = 'Button925 (Click Me)';
  childDiv2.id = 'Button925';

  parentDiv.appendChild(childDiv1);
  parentDiv.appendChild(childDiv2);

  target.appendChild(parentDiv);
}

<button onclick="addToDom(this)">Add to DOM</button>
<div id="target"></div>

MutationObserver 获取对目标元素的更改（可以是任何元素，包括 body）。在这种特殊情况下，它会在添加的节点中搜索与字典中元素的任何匹配项。如果找到它们，它会将相应的函数添加到点击监听器中。

【讨论】：

【解决方案2】：

您需要使用事件委托。

如果您希望在其中创建新元素的目标 div 的 id 为 tgt，您可以编写一个事件监听器，如下所示：

document.getElementById("tgt").addEventListener("click",function(event){
    alert(event.target.id);
});

【讨论】：