Emulate jQuery "on" with selector in pure Javascript
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!");
}
});
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