[小Tip]IE9中focus执行顺序差异

以下代码，点test2后，firefox、chrome、opera输出顺序是1、2，但IE9的顺序却是2、1。

<input id="test1" /> <button id="test2">click</button> <div id="out"></div>

    <script type="text/javascript">
        var test1 = document.getElementById('test1'),
            test2 = document.getElementById('test2'),
            out = document.getElementById('out');

        test1.addEventListener('focus', function(e) {
            out.innerHTML += '1<br />';
        });

        test2.addEventListener('click', function() {
            test1.focus();
            out.innerHTML += '2<br />';
        });
    </script>

PS，如果把test1.focus()换成下面这样，则所有浏览器表现一致，都是1、2这样的顺序：

var evt = document.createEvent('Events');

    evt.initEvent('focus', true, true, document.defaultView);
    test1.dispatchEvent(evt);

从表面上来看，IE9中的test1.focus()这个过程被异步执行了。解决方案倒是很简单，把后面的语句放在万能的setTimeout 0里就万事大吉了。

团队的郝同学在使用QWrap的valid组件时踩到这个坑了。先记录下来，稍后做一些详细研究，有结论了再更新。

@update，团队的贾同学补充了一个链接，看来这个问题一直存在，属于历史遗留问题，不限于IE9。http://stackoverflow.com/ques tions/5900288/ie-focus-event-handler-delay