实时jquery函数的任何模拟或替代，为现在和FUTURE元素添加了一个unner listner？

实时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 

与css选择器一起使用

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

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

Answer 2

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

 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。

例