1

テーブルに XML ファイルを入力しています。詳細にリンクする列があります。私が Web ページ (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 を割り当てました。

4

2 に答える 2

3

おそらく、テーブルのミューテーション イベントをリッスンし、イベントを発生させたターゲット要素を毎回確認する必要があります。以前は、これらのイベント「DOMNodeInserted」または「DOMSubtreeModified」でしたが、非常に遅かったため、新しい仕様によれば、リスナーはMutationObserverと呼ばれます (以前のものよりもはるかに高速です)。これは、私のテスト用に編集された Mozilla Web ページの例です。

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;
}
于 2013-02-25T23:50:53.760 に答える
2

まだ存在しない要素、または一連の要素に (要素ごとに 1 つ作成せずに) イベントを割り当てる場合は、デリゲートが必要です。デリゲートは、すべての子の代わりにイベントをリッスンする単なる親要素です。イベントを処理するときに、イベントをスローした要素が探しているものかどうかを確認します。

親<table>が常に終了する場合は、リスナーを追加するのに適した場所です。に追加することもできますbody。また、 for を複数の要素detailLinkとして使用しないでください。代わりにid使用してください。class

デモ： jsフィドル

脚本：

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>
于 2013-02-25T23:39:34.493 に答える