Emulate jQuery “on” with selector in pure javascript

Question

I would emulate in pure javascript the main functionality of jQuery .on( events , selector , data) method.

For example

$(document).on(\'click\',\'.         


        

Answer 1

Easy and short code:

function onEvt(type, callback) {
    if (document.attachEvent) {
        document.attachEvent("on" + type, function (e) {
            callback(e.target);
        });
    } else {
        document.addEventListener(type, function (e) {
            callback(e.target);
        }, false);
    }
}

Call the function like this:

onEvt('click', function(elem){ // click, mouseover etc...
    // for class
    if(elem.classList.contains('classname')){
        // do stuff
    }
    // for attribute
    if(elem.hasAttribute('target')){
        // do stuff
    }
});

Answer 2

This is actually surprisingly simple. You're on the right track, but it's not quite there.

Here's the functions I use:

window.addEvent = function(elem,type,callback) {
    var evt = function(e) {
        e = e || window.event;
        return callback.call(elem,e);
    }, cb = function(e) {return evt(e);};
    if( elem.addEventListener) {
        elem.addEventListener(type,cb,false);
    }
    else if( elem.attachEvent) {
        elem.attachEvent("on"+type,cb);
    }
    return elem;
};
window.findParent = function(child,filter,root) {
    do {
        if( filter(child)) return child;
        if( root && child == root) return false;
    } while(child = child.parentNode);
    return false;
};
window.hasClass = function(elem,cls) {
    if( !('className' in elem)) return;
    return !!elem.className.match(new RegExp("\\b"+cls+"\\b"));
};

The window.findParent is central to the whole thing, as you can see when I show you how to attach your desired on listener:

window.addEvent(document.body,"click",function(e) {
    var s = window.findParent(e.srcElement || e.target,function(elm) {
        return window.hasClass(elm,"button");
    },this);
    if( s) {
        console.log("It works!");
    }
});

Answer 3

Update for 2017: current DOM standards like closest mean this is now much easier.

const addEventForChild = function(parent, eventName, childSelector, cb){      
  parent.addEventListener(eventName, function(event){
    const clickedElement = event.target,
    matchingChild = clickedElement.closest(childSelector)
    if (matchingChild) cb(matchingChild)
  })
};

To use it just:

addEventForChild(parent, 'click', '.child', function(childElement){
  console.log('Woo click!', childElement)
})

Here's a jsfiddle