[英]Dynamically add EventListener in JavaScript
我正在用 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。
您可能需要監聽表的突變事件,然后每次檢查觸發該事件的目標元素。 以前它曾經是這些事件“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;
}
如果要將事件分配給尚不存在的元素或一系列元素(而不為每個元素創建一個),則需要一個委托。 委托只是一個父元素,它將偵聽事件而不是所有子元素。 當它處理事件時,您會檢查引發事件的元素是否是您要查找的元素。
如果父<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");
};
<div class="detailLink">click me</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.