ul onchange事件的侦听器在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.html

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

试试这个作为测试，它应该适用于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 +中似乎可以正常工作