谷歌浏览器表单的onChange事件没有触发

Question

如何让Google Chrome（Windows 7 64位上的9.0.597.98版本）触发表单的 onchange 事件？如果您尝试以下示例，将不会在控制台中输出任何内容。在Firefox 3.6.13中正常工作。

<form onchange="console.info('form changed')">
 <select>
  <option>uno</option>
  <option>dos</option>
 </select>
 <input type="radio" name="videoDevice" value="tres" checked="checked" />
 <input type="radio" name="videoDevice" value="cuatro" checked="checked" />
</form>

- JoJo

Answer 1

通过JS绑定change事件似乎工作正常：

HTML

<form id="test">
 <select>
  <option>uno</option>
  <option>dos</option>
 </select>
 <input type="radio" name="videoDevice" value="tres" checked="checked" />
 <input type="radio" name="videoDevice" value="cuatro" checked="checked" />
</form>

JS

document.getElementById('test').addEventListener('change', function() {
    alert('change fired');
}, false);

- ggutenberg

---

所以我们再次来到编码风格的主题。通过将更改监听器放在HTML中，读取我的代码的其他人可以快速看到发生了什么。通过使用JS附加侦听器，侦听器本质上是不可见的。他们必须阅读我所有的JS代码逻辑，才能找出我的代码的哪个部分正在处理onchange。 - JoJo

从技术上讲，将逻辑与表现分离是首选的方式。但撇开这个不谈，你总可以在HTML和JS中记录正在发生的事情。我倾向于在$(document).ready()（或您喜欢的框架中的等效部分）的开头放置所有监听器，以便清楚地显示绑定了什么。此外，这种方法有效，而onchange="..."出于某种未知原因则无效 ;) - ggutenberg

我想你是对的。但是在模型-视图-控制器中，JS的适配方式比较复杂。它既是视图又是控制器。它可以创建动画（视图），处理用户输入（控制），并为复杂应用程序存储数据（模型）。 - JoJo

该死，Firefox需要在浏览器战争中占据垄断地位。这样我们就能比以往更快地开发网站了。 - JoJo

同意JavaScript跨越了许多边界。但HTML不会——它只是用于展示。添加逻辑（即使只是一个函数调用）会超出其范围。显然，规则总有例外，但是如果你能让HTML保持纯粹的展示性，那么当你与仅仅负责HTML/CSS的设计师合作时，工作会更加轻松。 - ggutenberg

Answer 2

基本上，该表单只有以下两个事件：onreset和onsubmit。 你可以做一个变通的方法：

window.onload=(function ()
{
    var Form=
    {
        w3c: !!window.addEventListener,
        addEvent: function (form,type,listener)
        {
            var inputs=form.elements;
            for (var i=0,l=inputs.length; i<l; ++i)
            {
                var input=inputs[i];
                if (this.w3c)
                {
                    input.addEventListener(type,listener,false);
                }
                else
                {
                    input.attachEvent("on"+type,listener);
                }
            }
        },
        fixEvents: function (form)
        {
            var eventPattern=/^on(\w+)$/;
            var attribute;
            for (var i=0,l=form.attributes.length; i<l; ++i)
            {
                var attribute=form.attributes.item(i);
                var name=attribute.name;
                var value=attribute.value;
                if (eventPattern.test(name) && !form[name])
                {
                    var type=eventPattern.exec(name)[1];
                    var listener=new Function(value);
                    this.addEvent(form,type,listener);
                }
            }
        }
    };

    return function ()
    {
        var forms=document.getElementsByTagName("form");
        for (var i=0,l=forms.length; i<l; ++i)
        {
            Form.fixEvents(forms[i]);
        }
    };
})();

- inf3rno

---

为什么Firefox拥有完整的事件集，而Chrome没有？ - JoJo

Answer 3

     var button = document.form.adet;
        if (button.addEventListener) {  // all browsers except IE before version 9
            button.addEventListener ("change", function () { alert('1'); }, false);
        }
        else {
            if (button.attachEvent) {   // IE before version 9
                button.attachEvent ("onchange", function () { alert('2'); });
            }
        }

- Ogun Mericligil