使用本机 Javascript 实现 jQuery 的“实时”绑定器

我试图弄清楚如何将事件绑定到动态创建的元素。即使在元素被销毁和重新生成之后，我也需要事件持续存在于元素上。

显然，使用 jQuery 的 live 函数很容易，但是用本机 Javascript 实现它们会是什么样子呢？

这是一个简单的例子：

function live(eventType, elementId, cb) {
    document.addEventListener(eventType, function (event) {
        if (event.target.id === elementId) {
            cb.call(event.target, event);
        }
    });
}

live("click", "test", function (event) {
    alert(this.id);
});

基本思想是您希望将事件处理程序附加到文档并让事件在 DOM 中冒泡。然后，检查event.target属性来查看它是否符合所需的条件（在本例中，只是id的元素）。

Edit:

@shabunc https://stackoverflow.com/questions/9106329/implementing-jquerys-live-binder-with-native-javascript/9106397#comment30938597_9106397我的解决方案发现了一个相当大的问题——无法正确检测子元素上的事件。解决此问题的一种方法是查看祖先元素以查看是否有指定的元素id:

function live (eventType, elementId, cb) {
    document.addEventListener(eventType, function (event) {
        var el = event.target
            , found;

        while (el && !(found = el.id === elementId)) {
            el = el.parentElement;
        }

        if (found) {
            cb.call(el, event);
        }
    });
}