使用 Chrome 的 td 标记中的 Html-form-elements 的 Onchange 事件

Question

如何使用 Chrome 在表格单元格 (td) 中为表单标签调用 onchange 事件？ 以下代码适用于除 chrome 之外的所有浏览器。令人惊讶的是它适用于 Opera 15（应该使用与最新的 Google Chrome 相同的引擎（webkit/blink））。

<table><tr>
    <td onchange="bla()">
        <select>
            <option value="n">foo</option>
            <option value="n">foo</option>
            <option value="n">foo</option>
            <option value="n">foo</option>
            <option value="n">foo</option>
        </select>
    </td>

    <td onchange="bla()">
        <input type="text" />
    </td>

    <td>
    </td>
</tr></table>



<script>
function bla() {
    alert('something changed...');
}
</script>

我知道可以将事件绑定到选择标签，但对于我的网络应用程序来说，它不会那么好

Answer 1

whyonchange 不能正常工作的原因是，不是 cell 发生了变化，而是内部的表单元素。当然，如果您单击表格内容，也会单击该表格。这是有道理的：如果不先打开前门，您就无法打开房子内部的门。
但是，您可以进入房间，剪头发（对自己发起更改事件），而无需更改发生此事件的房间。在这方面，更改事件不会在父单元格上触发是有道理的。

事件确实遍历了 DOM，并且它确实传递了表格单元格，所以你可以在那里拾取它，但是不具有 HTML 属性。 （顺便说一句：尽量少用这些）。

尝试在 JS 中将监听器绑定到整个表。这样，只有 1 个侦听器适用于所有事件（称为事件委托）：

//assume tbl has id foobar:
document.getElementById('foobar').addEventListener('change',function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    var name = target.id || target.getAttribute('name');
    alert('the ' + name + ' element changed!');
},false);

Here's a slightly more complex version of event delegation，它还处理 IE8 中选择元素的更改事件。 （更改事件不会在旧 IE 中冒泡）。

几个链接：

• 一如既往：MDN
• How delegation works 上的一篇文章，它真的很简单
• 还有很好的怪癖模式：a comprehensive overview on event order/event models