的JavaScript相当于jQuery的。对（）的额外选择

Question

这里的jsfiddle exapmle：https://jsfiddle.net/1a6j4es1/1/

$('table').on('click', 'td', function() { 
    $(this).css('background', 'green'); 
}); 

如何这段代码普通的JavaScript被改写？
回调函数应该适用于table元素中新的td元素。

更新：我发现了一个很短，干净的解决方案：https://jsfiddle.net/1a6j4es1/28/

function delegateSelector(selector, event, childSelector, handler) { 

    var is = function(el, selector) { 
     return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector); 
    }; 

    var elements = document.querySelectorAll(selector); 
    [].forEach.call(elements, function(el, i){ 
     el.addEventListener(event, function(e) { 
      if (is(e.target, childSelector)) { 
       handler(e);     
      } 
     }); 
    }); 
} 

delegateSelector('table', "click", 'td', function(e) { 
    e.target.style.backgroundColor = 'green'; 
}); 

Answer 1

<table id="clickable" onclick="changecolor(this)" border=1> 
<tr><td></td><td></td><td></td><td></td><td></td></tr> 
<tr><td></td><td></td><td></td><td></td><td></td></tr> 
<tr><td></td><td></td><td></td><td></td><td></td></tr> 
<tr><td></td><td></td><td></td><td></td><td></td></tr> 
</table> 
<script> 
    function changecolor(table) 
    { 
    document.getElementById("clickable").addEventListener("click",tableClicked); 
     function tableClicked(e) { 
     e.target.style.backgroundColor = 'green'; 
    } 
    } 
</script> 

这对我有效..

Answer 2

添加ID到要点击元素，并使用此代码：

document.getElementById("tableId").addEventListener("click", function(e){ 
e.target.style.background = 'green'; 
});