javascript - 任何模拟或替代实时 jquery 函数，为当前和未来元素添加 enent 侦听器？

Question

任何模拟或替代实时 jquery 功能？

我需要使用没有 JQuery 和 JQuery.Live 的 live 功能的替代方案。

特别是我需要将 addEventListner 用于页面上的未来元素。

有什么选择吗？

谢谢

Answer 1

像下面这样的东西应该可以工作：

var live = function(elm, eventType, callback) {
    document.addEventListener(eventType, function(event) {
        if(event.target === elm) {
            callback.call(elm, event);
        }
    });
};

然后，您将按如下方式使用它：

var element = document.getElementById('test');
live(element, 'click', function() {
  // handle click event here
});

编辑：下面的优秀评论。这是一个修订版：

var live = function(selector, eventType, callback) {
    document.addEventListener(eventType, function(event) {
        var elms = document.querySelectorAll(selector),
            target = event.target || window.event.srcElement;
        for (var i=0; i<elms.length; i++) {
            if (elms[0] === target) callback.call(elms[i], event);
        }
    });
};

与 css 选择器一起使用

live('#test', 'click', function() {
    // handle click event here
});

jsFiddle：http: //jsfiddle.net/49aJh/2/

Answer 2

.on()您可以使用以下代码模拟功能：

HTMLElement.prototype.on = function (type, selector, func) {
    var attach = window.addEventListener ? "addEventListener":"attachEvent",
      elements = this.querySelectorAll(selector);
    this[attach](type, function (e) {
        var target = e && e.target || window.event.srcElement,
           success = false;
        while(target != this){
            console.log("searching"+ target);
            if (contained()){
                success = true;
                break;
            }
            target = target.parentNode;
        }
        if(success){func()}
        // helpermethod
        function contained(){ for (var i=elements.length;i--;){ if(elements[i] == target) return true; } }
    });
};

document.querySelector("div").on("click", "span", function() {
    console.log("gotcha!");
});

应该适用于所有浏览器到 IE8。

例子