Question

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

例如，如果我有两个元素，并且每个元素都有事件处理程序，那么如何判断这些元素何时被创建然后添加它们？

到目前为止，我要将文档的监听器添加到＆＃34; addElement＆＃34;事件，如果存在的话。我不知道是否存在。如果确实如此，请检查元素是否与函数字典中的任何现有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元素时，需要添加并删除事件侦听器。

Answer 1

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

以下面的例子为例：

＆＃13;

select count(*) from test_table where id = 'somePartitionId' and listids contains key 12;

＆＃13;

/*****
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);
}

＆＃13;

MutationObserver获取目标元素的更改（可以是任何元素，包括<button onclick="addToDom(this)">Add to DOM</button> <div id="target"></div>）。在这种特殊情况下，它会在添加的节点中搜索与字典中元素的任何匹配。如果if找到它们，它会将相应的函数添加到click侦听器。

Answer 2

您需要使用事件委派。

如果您希望创建新元素的目标 div 的ID为 tgt ，则可以像这样对事件监听器进行编码：

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

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

2 个答案: