事件对象的获取很简单，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了。

Paste_Image.png

首先：我们进行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，我们的确是可以保证各浏览器的兼容的，你说对么