在JavaScript中动态添加EventListener

Question

我正在用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。

Answer 1

你可能需要监听表的突变事件，然后每次都要检查发射过该事件的目标元素。以前是这些事件 "DOMNodeInserted"，或者 "DOMSubtreeModified"，但是它们的速度非常慢，所以根据新的规范，监听器被调用了。突变观察者 (这比以前的快多了). 这是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;
}

Answer 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>