事件其实在第一次学习JavaScript的时候就接触了，一行非常简单的代码 alert(‘Hello JavaScript!!!’)就诠释了什么是事件。事件是什么呢？事件在基于浏览器编程的语言JavaScript中是一个非常非常重要的方法，遍地都是这种语法。什么是事件呢？在JavaScript中事件可以理解为发生的一件事情，事件这个对象记录了这个过程中所有的数据。
1.事件的兼容性处理
准所周知，现在很多浏览器中分为标准浏览器阵营Chrome、FireFox等，非标准浏览器就是IE为代表了，在写代码的时候处处都要小心他们之间的兼容问题，这是家常便饭了。事件也不例外同样需要处理这些兼容性的问题。
理解事件最重要的是上面提到的事件对象：IE/Chrome:event是一个内置对象FireFox:是通过事件函数的第一个参数将事件对象传入document.onclick = alert(event);//为了兼容各种浏览器可以采用如下的写法var ev = ev || window.event ;var str = ”;var i = 0 ;//在ev事件对象中保存了事件发生过程中的所有信息，遍历事件对象中的信息，输出到页面中观察所有的信息for(var attr in ev){++i ;str += i + ‘ . ‘+ attr + ‘ —> ‘ + ev[attr] + ‘<br>’;}//将信息添加到页面中document.body.innerHTML = str ;}
上面的代码中var ev = ev || window.event ;使用了一种或的方式完成了非常完美的兼容性问题。其实在JavaScript中还有一种完美的方法处理兼容性的问题就是用if….else …进行判断，这两种方法给我处理兼容性问题提供了非常好的解决方法。
2.事件冒泡及案例
1.事件冒泡
事件冒泡非常经典的案例，不多说了，上一段网上非常经典的代码直接看结果，就理解是怎么回事了？
<script type=”text/javascript”> window.onload = objDiv1 = document.getElementById(‘div1’);var objDiv2 = document.getElementById(‘div2’);var objDiv3 = document.getElementById(‘div3’);{alert(this.id);}//给三个DIV同时绑定一个事件函数objDiv1.onclick = func ;objDiv2.onclick = func ;objDiv3.onclick = func ; }===></div>
点击DIV3发现弹出了三个结果，事实上只给DIV3绑定了一个事件函数。这就是典型的事件冒泡。有的网友说和DIV的物理位置有关，其实和DIV之间的包含关系有关，和物理上的定位关系没有半毛钱的关系的，做个试验就知道了。
2.利用事件冒泡的案例 下面的案例模拟的是网页边栏分享功能的实现，当鼠标移动到网页边栏分享的时候就出现一个DIV可以选择分享到那个网站上面的列表，可以将“分享到”放到子DIV中利用事件冒泡原理，将事件的处理给父级DIV处理。这样就很轻松实现了，如下代码：
<style type=”text/css”> : 20px;height: 90px;background: grey;position: absolute;right: -20px;top: 20px;text-align: center;font-size: 13px;}=”text/javascript”> window.onload = objBox = document.getElementById(‘box’);//鼠标移入事件交给父级DIV处理objBox.onmouseover = function(){objBox.style.left = ‘0’;}//鼠标移出事件交给父级DIV处理objBox.onmouseout = function(){objBox.style.left = ‘-100px’;} }==”slider”>点击分享</div></div>3.事件的绑定和捕获的理解
1.什么是事件绑定呢？
上面代码中的这段objDiv1.onclick = func ;就是事件绑定。只是这种写法有局限性，对于一个对象绑定两个事件就无能为力了，下面的可能覆盖上面的了。
{ alert(this); //alert(‘JavaScript’);}{ alert(‘jQuery’);}//下面的事件绑定覆盖了上面的绑定事件document.onclick = fn1 ;document.onclick = fn2 ;
所以就诞生了事件的绑定函数attachEvent()和addEventListener()两个函数 ，为啥有两个呢？不多说了浏览器多，对付两个阵营的浏览器的绑定事件的，所以还要处理兼容性的问题，在处理兼容性的问题，要搞清楚这个两个绑定事件函数的区别如下代码和分析：
{alert(this);//alert(‘JavaScript’);}{alert(‘jQuery’);}//非标准IE绑定事件函数document.attachEvent(‘onclick’,fn1);document.attachEvent(‘onclick’,fn2);//标准浏览器的绑定事件函数document.addEventListener(‘click’,fn1,false);document.addEventListener(‘click’,fn2,false);
仔细观察上面的执行结果总结出如下区别：
非标准IE attachEvent(‘事件名称’，‘事件函数’);标准：addEventListener(事件名称，事件函数，是否捕获);其中是否捕获默认是false false:冒泡 true:捕获事件名称没有on事件执行时正序事件进行捕获 这个时候可以封装一个函数同意解决这个兼容的问题如下：{ //标准浏览器if(eventObj.addEventListener){eventObj.addEventListener(eventName,funName,false);} else {//非标准浏览器eventObj.attachEvent(funName.call(eventObj);});}}{alert(this);}//调用测试bindEvent(document,’click’,fn1);不求与人相比，但求超越自己，要哭就哭出激动的泪水，要笑就笑出成长的性格。
