2

ページ上のすべてのアンカータグにイベントリスナーを追加するFirefox拡張機能を作成しています。基本的に私は持っています：

window.addEventListener("load", function() { myExtension.init(); }, false);

var myExtension = {

    init: function() {
    var appcontent = document.getElementById("appcontent");  
    if(appcontent)
        appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);  
    },

    onPageLoad: function(event) {
        var doc = event.originalTarget;
        var anchors = doc.getElementsByTagName("a");
        //attach event listeners
    }
}

これは、ページ上のほとんどのタグで機能します。問題は、javascriptで追加されたタグがイベントリスナーをアタッチしないことです。createElementを再定義してみました：

//in the onPageLoadFunction
var originalCreateElement = doc.createElement;
doc.createElement = function(tag) {
    if (tag != "a"){
        return originalCreateElement(tag);
    }
    var anchor = originalCreateElement("a");
    anchor.addEventListener("mouseover", myInterestingFunction, false);
    return anchor;
}

DOM挿入リスナーを追加してみました

//in the onPageLoadFunction
function nodeInserted(event){;
    addToChildren(event.originalTarget);
}

function addToChildren(node){
    if (node.hasChildNodes()){
        var nodes = node.childNodes;
        for (var i = 0; i < nodes.length; i++){
            addToChildren(nodes[i]);
        }
    }
    if (node.nodeName == "a"){
        anchorEvent(node); //adds event listeners to node
    }
}

doc.addEventListener("DOMNodeInserted", nodeInserted, false);

しかし、どちらも機能しません。これらのアンカーオブジェクトへの参照を取得して、リスナーを追加するにはどうすればよいですか？

ありがとう

4

1 に答える 1

1

「ページ上のすべてのアンカータグにイベントリスナー」を動的に追加することは、効率的に行うのが困難です。2つの選択肢があります。

  1. 定期的にページをポーリングしてアンカータグを探します（jQuery.live()そうです）
  2. DOMミューテーションイベント（DOMNodeInsertedなど）を使用する

前者は明らかにパフォーマンスに影響を与えます。ミューテーションイベントを使用すると、パフォーマンスに隠れたコストがかかります。ドキュメントにミューテーションイベントが追加された場合、GeckoはDOMコードのパスを遅くするため、すべてのDOM操作の動作が遅くなります。

addEventListenerいくつかのトップレベル要素（またはウィンドウ全体）にリスナーを設定し、ターゲットがアンカーであるかどうかを確認するために使用してみませんか？キャプチャリスナーを使用して、デフォルトのアクションが発生する前にリスナーを呼び出すことができます。

于 2009-10-16T05:46:34.980 に答える