Event delegation pure JS
Very simple implementation of event delegation in pure JS
HTML
<ul id="test">
<li><a href="#">test</a></li>
</ul>
<a href="#">test</a>
CSS
ul {
background: yellow;
padding: 10px;
}
li {
background: blue;
padding: 10px;
}
a {
background: cyan;
padding: 10px;
}
JavaScript
var relayEvent = function(element, target, eventName, fn){
var targetEl = document.querySelector(target);
var elementEl = document.querySelector(element);
elementEl.addEventListener(eventName, function(event){
if (event.toElement === targetEl){
fn.call(this, event, event.toElement);
}
}, false);
};