具有附加选择器的jQuery .on()方法的JavaScript等效方法

Question

这里有一个JSFiddle示例：https://jsfiddle.net/1a6j4es1/1/

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

如何用普通JavaScript重写这段代码？
回调函数应该可以处理表格元素内的新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';
});

- Dmitry

Answer 1

给您希望点击的元素添加一个ID，并使用以下代码：

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

- Eyal

---

如果一个td里面有span或者div怎么办？ - charlietfl

@charlietfl 你想对它们做什么？ - Eyal

希望更改父级<td>而不是子级。 target可能不是<td>。 - charlietfl

@charlietfl，那么不要使用e.target，而是使用document.getElementById("tableId")，这样你就可以得到你想要的特定元素。 - Eyal

需要更改整个表格而不是单个td。需要做的是从目标向上遍历dom并测试td。当前解决方案过于简化了情况。 - charlietfl

Answer 2

<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>

这对我来说有效..

- Jaivik

---

当一个单元格包含子元素时，该方法无法工作。或者当存在<tr>单元格时也会出现问题。 - Bergi

我修复了解决方案：https://jsfiddle.net/1a6j4es1/27/ - Dmitry