在 JavaScript 中动态添加 EventListener答案

【问题标题】：Dynamically add EventListener in JavaScript在 JavaScript 中动态添加 EventListener
【发布时间】：2013-02-25 22:44:59
【问题描述】：

我正在使用 XML 文件填充一个表，我有一个链接到更多详细信息的列。由于我运行网页的方式（Chrome 扩展），我需要在填充表格时动态添加事件处理程序。

我有这个工作......

document.addEventListener('DOMContentLoaded', function () {
document.getElementById("detailLink").addEventListener('click',
    clickHandlerDetailLink); });

function clickHandlerDetailLink(e) {   detailLinkPress('SHOW'); }

function detailLinkPress(str) {
alert("Message that will show more detail");
}

但是如何动态添加事件处理程序呢？我已经为该列中的所有字段分配了 detailLink 的 ID。

【问题讨论】：

标签： javascript html dom-events addeventlistener event-listener

【解决方案1】：

您可能需要监听表的突变事件，然后每次检查触发该事件的目标元素。以前它曾经是这些事件“DOMNodeInserted”或“DOMSubtreeModified”，但它们非常慢，因此根据新规范，侦听器被称为 MutationObserver（这比以前的要快得多）。这是为我的测试编辑的一些 Mozilla 网页的示例：

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    alert(mutation.target.id + ", " + mutation.type + 
    (mutation.addedNodes ? ", added nodes(" + mutation.addedNodes.length + "): " + printNodeList(mutation.addedNodes) : "") + 
    (mutation.removedNodes ? ", removed nodes(" + mutation.removedNodes.length + "): " + printNodeList(mutation.removedNodes) : ""));
  });   
});

// configuration of the observer:
var config = { attributes: false, childList: true, characterData: false };

var element = document.getElementById('TestID');

// pass in the target node, as well as the observer options
observer.observe(element, config); 

function printNodeList(nodelist)
{
    if(!nodelist)
        return "";
    var i = 0;
    var str = "";
    for(; i < nodelist.length; ++i)
        str += nodelist[i].textContent + ",";

    return str;
}

【讨论】：

【解决方案2】：

如果要将事件分配给尚不存在的元素或一系列元素（无需为每个元素创建一个），则需要委托。委托只是一个父元素，它将侦听事件而不是所有子元素。当它处理事件时，您会检查引发事件的元素是否是您要查找的元素。

如果父 <table> 总是退出，那将是添加监听器的好地方。您也可以将其添加到body。此外，您不应将detailLink 用作id 用于多个元素。请改用class。

演示：

脚本：

document.body.addEventListener( 'click', function ( event ) {
    if( event.srcElement.className == 'detailLink' ) {
        detailLinkPress( 'SHOW' );
    };
} );

function detailLinkPress( str ) {
    alert("Message that will show more detail");
};

HTML：

<div class="detailLink">click me</div>

【讨论】：

如果我的活动是focus，它似乎不起作用。我该怎么办？