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

动态添加“事件侦听器到页面上的所有锚标记”很难有效地完成。你有两个选择：

  1. 定期轮询页面的锚标签（就像这样jQuery.live()做）
  2. 使用DOM 突变事件（DOMNodeInserted 等）

前者对性能有明显的影响。使用突变事件有一个隐藏的性能成本：如果为文档添加任何突变事件，Gecko 在其 DOM 代码中采用较慢的路径，因此所有 DOM 操作的工作速度较慢。

为什么不使用addEventListener在某些顶级元素（甚至整个窗口）上设置监听器并检查目标是否是锚点？您可以使用捕获侦听器在默认操作发生之前调用您的侦听器。

于 2009-10-16T05:46:34.980 回答