我正在编写一个 firefox 扩展,将事件监听器添加到页面上的所有 anchor 标记。基本上我有:
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);
但都不起作用。我如何获取对这些 anchor 对象的引用,以便我可以向它们添加监听器?
谢谢
最佳答案
动态添加“事件监听器到页面上的所有 anchor 标记”很难有效地完成。您有两个选择:
- 定期轮询页面以查找 anchor 标记(如
jQuery.live()
所做的那样) - 使用DOM mutation events (DOMNodeInserted 等)
前者对性能有明显的影响。使用变异事件有一个隐藏的性能成本:如果为文档添加任何变异事件,Gecko 在其 DOM 代码中采用较慢的路径,因此所有 DOM 操作的工作速度较慢。
为什么不使用 addEventListener
在某个顶级元素(甚至整个窗口)上设置监听器并检查目标是否是 anchor ?您可以使用捕获监听器让您的监听器在默认操作发生之前被调用。
关于javascript - XUL 将事件附加到使用 javascript 添加的 anchor ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1575837/