onchange 事件的 ul 侦听器在 IE 中不起作用

Question

我有一个 input 列表，

<ul id="list">
    <li><input type="text" /></li>
    <li><input type="text" /></li>
    <li><input type="text" /></li>
    <li><input type="text" /></li>
</ul> 

因为有很多，所以我让 ul 做一个事件委托：

function addHandler(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + type, handler);
    } else {
        element["on" + type] = handler;
    }
}
addHandler(document.getElementById("list"), "change", function(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;
    if (target.nodeName === "INPUT") {
        alert(target.value);
    }
});

这在 Chrome、Firefox 中效果很好，但在 IE 中不行，这是什么？有问题吗？
小提琴：http://jsfiddle.net/94ngc/

Answer 1

问题在于 change 事件在 IE<9 中存在错误。看看这个图表：

http://www.quirksmode.org/dom/events/ 如您所见， change

事件在所有浏览器中都有效，但 IE 仅在输入元素上触发它（我想它只是没有正确冒泡，或者它不适用于其他元素）。

尝试将此作为测试，它应该适用于 IE 中的第一个输入：

var inp = document.getElementById("list").firstChild.firstChild;
addHandler(inp, "change", function(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;
    if (target.nodeName === "INPUT") {
        alert(target.value);
    }
});

我建议您循环遍历所有输入并将侦听器附加到每个元素，而不是将事件委托给 UL，或者使用像 jQuery 或 YUI 这样的事件规范化器。

注意：您的代码似乎在 IE9+ 中运行良好