自定义Javascript库：将事件侦听器添加到动态添加的html

我正在尝试构建一个类似jQuery的Javascript库，只是为了进一步学习Javascript。到目前为止，我已经开发了以下内容：

window.jsLib = function (selector) {
    var about = {
        Version: 0.1
    };
    if (selector) {
        if (window === this) {
            return new jsLib(selector);
        }
        if (typeof selector === 'string') {
            var nodes = document.querySelectorAll(selector);
            for (var i = 0; i < nodes.length; i++) {
                this[i] = nodes[i];
            }
            this.length = nodes.length;
        } else if (typeof selector === 'object') {
            this[0] = selector;
            this.length = 1;
        }
        return this;
    } else {
        return about;
    }
};

window.jsLib=函数（选择器）{
var about={
版本：0.1
};
如果（选择器）{
如果（窗口===此）{
返回新的jsLib（选择器）；
}
如果（选择器的类型=='string'）{
var节点=document.querySelectorAll（选择器）；
对于（var i=0；i

对于方法，我开发了一些类似的方法：

jsLib.fn = jsLib.prototype = {
    css: function (key, value) {
        if (value !== undefined) {
            for (var i = 0; i < this.length; i++) {
                this[i].style[key] = value;
            }
            return this;
        } else {
            for (var i = 0; i < this.length; i++) {
                return this[i].style[key];
            }
        }
    },
    html: function (value) {
        if (value !== undefined) {
            for (var i = 0; i < this.length; i++) {
                this[i].innerHTML = value;
            }
            return this;
        } else {
            for (var i = 0; i < this.length; i++) {
                return this[i].innerHTML;
            }
        }
    },
    on: function (type, callback) {
        console.log(window.event);
        for (var i = 0; i < this.length; i++) {
            this[i].addEventListener(type, callback, false);
        }
        return this;
    },
    trigger: function (type) {
        var event = new Event(type);
        for (var i = 0; i < this.length; i++) {
            this[i].dispatchEvent(event);
        }
        return this;
    },
    append: function(value) {
        var old = this.html();
        this.html(old + '' + value);
        return this;
    }
};

jsLib.fn=jsLib.prototype={
css：函数（键、值）{
如果（值！==未定义）{
for（var i=0；i

您可能已经注意到，我在上定义了一个方法，比如jQuery

每当我调用jsLib（'div#foo'）。on（'click'，someFunc），工作正常

但是，假设我附加了一些html，比如

jsLib（'body'）。append（“”）

然后我想提供一个API，将事件监听器添加到
#bar
中，比如
jsLib（'body'）

但我不确定如何实现这个侦听器

请帮忙。
从您的评论中，我想您要求一个实时实现

如果是这种情况，我建议您向对象添加一个数据方法，记住要注册的所有事件，并在将内容追加到当前元素时从append方法注册它们

我使用.data和.live方法扩展了您的库，并将事件注册排队，以便在正文中添加下一个跨度。查看修改后的代码段，并检查控制台以进行验证。
window.jsLib=函数（选择器）{
var about={
版本：0.1
};
如果（选择器）{
如果（窗口===此）{
返回新的jsLib（选择器）；
}
如果（选择器的类型=='string'）{
var节点=document.querySelectorAll（选择器）；
对于（var i=0；i1），则此._data[key]=arguments[1]；//Setter
return key？this.\u data[key]：this.\u data；//key的Getter或all
},
live：函数（类型、选择器、回调）{
此.data（'jsLib\u Future\u Events'，（th