在JavaScript中动态添加EventListener

我用一个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。

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

如果父级

始终存在，那么这将是添加侦听器的好地方。您还可以将其添加到

正文

。此外，您不应该将

detailLink

用作多个元素的

id

。改用

class

演示：

脚本：

document.body.addEventListener（'click'，函数（事件）{
如果（event.srceelement.className=='detailLink'）{
detailLinkPress（‘SHOW’）；
};
} );
功能详细信息链接按（str）{
警报（“将显示更多详细信息的消息”）；
};

HTML:

点击我

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

如果父级

始终存在，那么这将是添加侦听器的好地方。您还可以将其添加到

正文

。此外，您不应该将

detailLink

用作多个元素的

id

。改用

class

演示：

脚本：

document.body.addEventListener（'click'，函数（事件）{
如果（event.srceelement.className=='detailLink'）{
detailLinkPress（‘SHOW’）；
};
} );
功能详细信息链接按（str）{
警报（“将显示更多详细信息的消息”）；
};

HTML:

点击我

您可能需要侦听表的突变事件，然后每次检查触发该事件的目标元素。以前，这些事件通常是“DOMNodeInserted”或“domsubtredemodified”，但它们的速度非常慢，因此根据新的规范，侦听器被称为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;
}

var observer=新的突变观察者（函数（突变）{
突变。forEach（功能（突变）{
警报（mutation.target.id+，“+mutation.type+
（mutation.addedNodes？”，添加节点（“+mutation.addedNodes.length+”）：“+printNodeList（mutation.addedNodes）：”）+
（mutation.removedNodes？”，删除的节点（“+mutation.removedNodes.length+”）：“+printNodeList（mutation.removedNodes）：”）；
});   
});
//观察员的配置：
var config={attributes:false，childList:true，characterData:false}；
var元素=document.getElementById（'TestID'）；
//传入目标节点以及观察者选项
observer.observe（元素，配置）；
函数printNodeList（nodelist）
{
如果（！节点列表）
返回“”；
var i=0；
var str=“”；
对于（；i

您可能需要侦听表的突变事件，然后每次检查触发该事件的目标元素。以前，这些事件通常是“DOMNodeInserted”或“domsubtredemodified”，但它们的速度非常慢，因此根据新的规范，侦听器被称为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;
}

var observer=新的突变观察者（函数（突变）{
突变。forEach（功能（突变）{
警报（mutation.target.id+，“+mutation.type+
（mutation.addedNodes？”，添加节点（“+mutation.addedNodes.length+”）：“+printNodeList（mutation.addedNodes）：”）+
（mutation.removedNodes？”，删除的节点（“+mutation.removedNodes.length+”）：“+printNodeList（mutation.removedNodes）：”）；
});   
});
//观察员的配置：
var config={attributes:false，childList:true，characterData:false}；
var元素=document.getElementById（'TestID'）；
//传入目标节点以及观察者选项
observer.observe（元素，配置）；
函数printNodeList（nodelist）
{
如果（！节点列表）
返回“”；
var i=0；
var str=“”；
对于（；i

如果我的事件是

焦点

，它似乎不起作用。我该怎么办？如果我的事件是

focus

，它似乎不起作用。我该怎么办？