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

我知道可以将事件绑定(bind)到选择标签，但对于我的网络应用程序来说，它不会很好地工作

Answer 1

为什么 onchange 无法正常工作的原因是，变化的不是单元格，而是内部的表单元素。当然，如果您单击表格内容，该表格也会被单击。这是有道理的:如果不先打开前门，就无法打开房子内的门。
然而，你可以进入一个房间，剪头发(对自己触发一个改变事件)，而不改变这个事件发生的房间。从这方面来说，更改事件不会在父单元格上触发是有道理的。

不过，事件确实遍历 DOM，并且它确实传递表格单元格，因此您可以在那里选取它，但是不包含 HTML 属性。 (顺便说一句:尽量少用它们)。

尝试在 JS 中将监听器绑定(bind)到整个表。这样，只有 1 个监听器适用于所有事件(称为事件委托(delegate)):

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