event对象在IE和firefox下表现是不同的。在IE下,event是window对象的一个属性,是在全局作用域下的,而在firefox里,event对象是做为事件的参数存在的:
===========================
<input type="button" id="btn" value="click me" />
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
alert(arguments.length);
};
</script>
===========================
这代代码在IE下弹出0,而在firefox下弹出1。在firefox下这个参数就是event对象了。
如果在标签内联事件中触发事件会如何呢?
===========================
<input type="button" id="btn" value="click me" onclick = "handler();" />
<script type="text/javascript">
function handler(){
alert(arguments.length);
};
</script>
===========================
在IE和firefox下,这段代码弹出的都是0.也就是说,标签内联事件并没有被替换成
===========================
btn.onclick = handler;
function handler(){
alert(arguments.length);
}
===========================
而是替换成了
===========================
btn.onclick = function(){
handler();
}
function handler(){
alert(arguments.length);
}
===========================
在标签内联事件中,我们使用arguments[0]可以在firefox下访问到event对象。
===========================
<input type="button" id="btn" value="click me" onclick = "alert(arguments[0].type)" />
===========================
因为不使用标签内联事件的话,我们可以给处理函数传参,从而指定arguments[0]的变量名,通常情况下,我们平时也的确是这么处理的:
===========================
<input type="button" id="btn" value="click me" />
<script type="text/javascript">
document.getElementById("btn").onclick = function(e){
e = window.event || e; //e兼容IE和firefox,指向event对象
};
</script>
===========================
在标签内联事件中我们没办法指定参数名,是不是就没办法直接写个变量在IE和firefox下兼容地指event对象呢?不是的,可以用“event”这个变量名兼容地指向event对象,注意,只能是“event”,如果是“a”,“b”,“Event”之类的全都不行。可能是因为考虑到标签内联事件中无法指定参数变量名,所以故意留个了“event”这个关键字吧。
===========================
<input type="button" id="btn" value="click me" onclick="alert(event.type);" />
===========================
这段代码在IE和firefox下都可以正常地弹出“click”。
有趣的是,标签内联事件中我们甚至可以写注释,可以使用字符串:
===========================
//只弹出1
<input type="button" id="btn" value="click me" onclick="alert(1);//alert(2);alert(3);" />
//弹出1和3
<input type="button" id="btn" value="click me" onclick="alert(1);/*alert(2);*/alert(3);" />
//弹出“string”
<input type="button" id="btn" value="click me" onclick="var a='abc';alert(typeof a);"/>
===========================
如果我们既用标签内联事件绑定了事件,又用DomNode.onxxxx绑定了事件,又会如何呢?
===========================
<input type="button" id="btn" value="click me" onclick="alert(123);" />
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
alert(456);
};
</script>
===========================
会如何呢?会弹出456,不弹出123。相当于
===========================
<input type="button" id="btn" value="click me" />
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
alert(123);
};
document.getElementById("btn").onclick = function(){
alert(456);
};
</script>
===========================
后面的处理函数把前面的处理函数覆盖掉了。如果我们给DomNode是通过attachEvent和addEventListener来绑定事件的呢?
===========================
<input type="button" id="btn" value="click me" onclick="alert(123);" />
<script type="text/javascript">
function handler(){
alert(456);
}
if(document.all){
btn.attachEvent("onclick",handler);
} else {
btn.addEventListener("click",handler,false);
}
</script>
===========================
很顺利地,先弹出了123,后又弹出了456。