前两天在发行正当口碰到个Bug,是我introduced,让我非常紧张,感到惭愧。
大致是这样的一个问题,我写段能描述问题的代码:
<body> <div id="haha">sijoerere <select id="dd" οnchange="abc(event)" id="dd"> <option value="a">aa</option> <option value="b">bb</option> <option value="c">cc</option> </select> </div> </body> <script> function abc(event) { document.getElementById("haha").innerHTML=""; event = event? event: window.event; var elm = event.srcElement? event.srcElement: event.target; alert(elm); alert(document.getElementById("dd")); var v = elm.value; alert(v); } </script>
目的是select对象onchange的时候将获取的value拿去处理,同时要将div内容清空。
按照正常思维,肯定是先拿value,再清空的。
由于具体需求逻辑比较复杂,加上自己可能思维有点问题,总之我先清空再获取值了。
如果不跑程序,我认为这是行不通的。
当时觉得这是个低级错误,也觉得被自己吓到了,怎么会这么粗心?!当时解决的办法当然是调整顺序了。
回想一下,自己有测试啊,而且相当小心的,当时没发现啊,FF下测了,IE下- 没印象,IE没测?我无语,真是再小心也犯错!
这不去管,FF下测了通过了?说不通啊,内容都清空了,哪来的值呢?
。。。。。。。。。。。。。。
经过一番调试,总结出如下结论:
无论在IE还是FF,event对象是能捕获对应的对象的,包括对象上的值,这就是为什么第一次alert出来是object了。event对象是在事件发生时存在,事件结束时销毁,在event存在时所有相关的对象都在event中,这个能从firebug或IE的developer tools中观察到。所以即使父容器的innerHTML清空了,还是能拿到当时的对象和对象的值。
在这个例子中IE之所以与FF有区别,是因为select这个对象比较特殊,它其实是个集合。IE中的event包含了select对象却没有包含它的儿子,FF当然都包含了,所以结果是IE中js也不报错,返回的值为空,FF正常通过。
但是以后一定是要注重顺序,反复测试!