Question

如何使用Chrome在表单元格（td）中为其中的表单标记调用onchange事件？以下代码适用于除chrome之外的所有浏览器。令人惊讶的是它适用于Opera 15（应使用与最新谷歌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>

我知道可以将事件绑定到select标签，但对于我的Web应用程序，它将无法正常工作

Answer 1

为什么 onchange无法正常工作的原因是因为它不是单元格更改，而是内部的表单元素。当然，如果单击表格内容，也会单击该表格。这是有道理的：你不能在没有先打开前门的情况下在房子内打开门但是，你可以进入一个房间，剪掉你的头发（自己发动变化事件），而不用改变发生这一事件的房间。在这方面，更改事件不会触发父单元格。

事件遍历DOM，但传递表格单元格，所以你可以在那里拿起它，但是不是HTML属性。（顺便说一句：尝试尽可能少地使用它们。）

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

//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的文章，以及它的真实性

好的'quirksmode：a comprehensive overview on event order/event models

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

1 个答案: