事件对象的获取很简单,IE事件中事件对象作为全局对象window.event存在,firefox中则是作为句柄(handler)的第一个参数传入内的
var evt=window.event||arguments[0];
四种添加事件的方式讨论
1.直接在html属性中写js代码
<div onclick="alert(4);">Div1 Element</div>
大概这是上世纪90年代的写法,那时候直接把js代码写在网页中很普遍,也许那时候的js并不太重要,只是用来做做验证或一些花哨的效果而已。如何在这种添加事件方式下获取到事件对象?IE中很简单,
因为event是作为全局对象的,所以直接使用event即可,如下
<div onclick="alert(window.event.type);">Div1 Element</div>
单击div之后,弹出信息框,说明事件对象已经被获取
fireFox中回报错,因为不支持IE方式获取事件对象而是以句柄的第一个参数传入的
<div onclick="alert(event.type);">Div1 Element</div>
在 IE/Opera/Safari/Chrome 中测试,和刚刚不会有什么区别。在Firefox中再测,会有个惊喜,你会发现居然弹出的是"click"信息框,而不是"undefined"。
两次测试区别仅仅一个用window.event.type,一个用event.type。这个问题下面详细讨论。
下面用句柄第一个参数来获取事件对象,可以把onclick属性的值想象成一个匿名函数,onclick属性值的字符串实际上都是这个匿名函数内的js代码。
既然这样,我们就可以通过Function的一个属性argumengs获取到该匿名函数的第一个参数,而该参数就是事件对象。如
<div onclick="alert(arguments[0].type);">Div1 Element</div>
IE中会报错,提示:arguments.0.type为空或不是对象
Firefox/Opera/Safari/Chrome 中会弹出"click"内容的信息框,说明他们都支持事件对象作为句柄第一个参数传入。从侧面也说明了 Opera/Safari/Chrome 不仅支持W3C标准方式获取事件对象,
同时也兼容了IE方式获取事件对象。
2.第二种添加事件的方式,定义一个函数,赋值给html元素的onxxx属性
<script type="text/javascript">
function clk(){}
</script>
<div onclick="clk()">Div2 Element</div>
先定义函数clk,然后赋值给onclick属性,这种方式也应该属于上世纪90年代的流行写法。比第一种方式好的是它把业务逻辑代码都封装在一个函数里了,使HTML代码与JS代码稍微有点儿分离,
不至于第一种那么紧密耦合。
如何在这种方式(clk函数内)中获取事件对象?IE中使用全局对象event仍然没问题,如:
3.第三种添加事件的方式,使用element.onxxxx
<div id="d3">Div3 Element</div>
<script type="text/javascript">
var d3 = document.getElementById('d3');
d3.onclick = function(){ }
</script>
这种方式也比较早期,但好处是可以将JS与HTML完全分离,但前提是需要给HTML元素提供一个额外的id属性(或其它能获取该元素对象的方式)。
这种方式添加事件IE6/7/8只支持window.event不支持参数传入,Firefox只支持参数传入不支持其它方式。IE9/Opera/Safari/Chrome 两种方式都支持。
4.第四种添加方式,使用addEventListener或IE专有的attachEvent
<div id="d4">Div4 Element</div>
<script type="text/javascript">
var d4 = document.getElementById('d4');
function clk(){alert(4)}
if(d4.addEventListener){
d4.addEventListener('click',clk,false);
}
if(d4.attachEvent){
d4.attachEvent('onclick',clk);
}
</script>
这是目前推荐的方式,较前两种方式功能更为强大,可以为元素添加多个句柄(或称响应函数),支持事件冒泡或捕获,前三种方式默认都是冒泡。当然IE6/7/8仍然没有遵循标准而使用了自己专有的attachEvent,且不支持事件捕获。IE9 中已经支持addEventListener了。
首先:我们进行ie和其他浏览器的判断
ie的document对象有一个all属性,它的里面存放了页面的所有标签,而其它浏览器是没有的,所以在ie中,事件对象的传播会绑定在全局的windows上,所以ie浏览器肯定是都支持window.event的
其次:特殊的firefox;
firefox只支持事件对象作为参数传入,而这又恰恰是ie6/ie7/ie8所无法实现的,所以可以成功的区分这两类,写个实例进行测试的话,如下:
var btn = document.getElementById('btn');//一个按钮
btn.onclick = function(event){//给btn绑定一个点击事件
//其他浏览器会在点击发生的时候,把事件对象当作参数传递过来
alert('其他浏览器:' + event);
//在ie浏览器中,这个event变量是空,它会在全局的window上
alert('ie浏览器:' + window.event);
}
最后,就是ie9/chrome/opera/safari,则两种方式都支持,仅凭这点很难判定浏览器类型
但是,只要写上var e=event?event||window.event,我们的确是可以保证各浏览器的兼容的,你说对么