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＆lt; 9中是错误的。看看这张图表：

http://www.quirksmode.org/dom/events/change.html

正如您所看到的，更改事件适用于所有浏览器，但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 +

中正常工作

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

1 个答案: