Any emulation or alternative to the live jquery function that adds listent for existing and FUTURE elements?

Question

Any emulation or alternative to live jquery?

I need to use an alternative to a live function without jQuery and jQuery.Live.

In particular, I need to use addEventListner for future elements on the page.

Any alternative?

thanks

Answer 1

Something like the following should work:

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

Then you will use it as follows:

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

EDIT: Great comments below. Here is the revised version:

 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); } }); }; 

Use it with css selectors

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

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

Answer 2

You can emulate .on() functionality with this code:

 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!"); }); 

Should work in all browsers prior to IE8.

Example