Event对象之我的理解

前两天在发行正当口碰到个Bug,是我introduced,让我非常紧张,感到惭愧。

大致是这样的一个问题,我写段能描述问题的代码:

<body>
<div id="haha">sijoerere
<select id="dd" onchange="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正常通过。

 

但是以后一定是要注重顺序,反复测试!

 

你可能感兴趣的:(IE,Firebug)