XUL прикрепление событий к якорям, добавленным с помощью JavaScript

Question

Я пишу расширение 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);

но ни одна из них не работает Как я могу получить ссылки на эти якорные объекты, чтобы я мог добавить к ним слушателей?

Спасибо

Answer 1

Динамическое добавление "слушателей событий ко всем тегам привязки на странице" сложно сделать эффективно. У вас есть два варианта:

1. Периодически опрашивать страницу на предмет привязки тегов (например, jQuery.live() делает)
2. Использовать события мутации DOM (DOMNodeInserted и т. Д.)

Первый имеет очевидное влияние на производительность. Использование событий мутации влечет за собой скрытые затраты производительности: если для документа добавляются какие-либо события мутации, Gecko выбирает более медленный путь в своем коде DOM, поэтому все манипуляции с DOM работают медленнее.

Почему бы не использовать addEventListener настроить прослушиватель на некоторый элемент верхнего уровня (или даже на все окно) и проверить, является ли цель якорем? Вы можете использовать захватывающий слушатель, чтобы вызвать его до того, как произойдет действие по умолчанию.