javascript - 現在の要素と未来の要素の両方にリスナーを追加するライブ jquery 関数のエミュレーションまたは代替手段はありますか?

Question

ライブ jquery 関数のエミュレーションまたは代替機能はありますか?

JQuery と JQuery.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 までのすべてのブラウザで動作するはずです。

例