Javascript再探 event 事件。
我们知道浏览器中有很多的差异性，比如对于 浏览器中的 event 事件进行处理的方式， IE 明显的就和别的浏览器不一样。所以后来诞生了风靡前端的 jQuery 库。我原先以为jQuery库只是在 jQuery 对象得到层面对于一般的 javascript 代码进行了跨浏览器整合和优化。但是今天在用的时候也发现了，对于部分的DOM 也进行了跨浏览器整合。下面就以我碰到的 event 做一个例子。
在 jQuery 中进行 event handle attachment 的时候。自然会有对应的 handle 处理函数。在jQuery 中的 handle 处理函数中可以带入 event 参数，这里带入的 event 的参数的话可是 jQuery 进行了再次封装的了。而不再是原先的原生 dom event 了。但是 jQuery 封装 NB 的一点就体现在，虽然对此 dom 进行了二次封装，但是原则上还是和 DOM 标准制定的规则保证了高度一致性，比如 event.target 和 event.currentTarget 都和 DOM 标准中的规则一模一样。
除了这些原 DOM 有的属性外，当然 jQuery 也加入了自己库中的一些特性。最为典型的就是event.delegateTarget。官方的 API 解释为：Description: The element where the currently-called jQuery event handler was attached. 返回的是绑定事件的 jQuery 对象。
大概的介绍就介绍完了，反正在使用的时候你会感觉到 jQuery 原生库对于前端开发人员强大的便利的。再也不用担心各个浏览器之间的不同了，真的是超级 HIGH 的一种体验。下面介绍有关 event 的跨浏览器 jQuery的处理办法。
只需要在 attachment 函数中的 handle 处理函数的参数加上 event 参数，就可以在 handle 处理方法中使用 jQuery 给予的跨浏览器 event 对象。
在 IE 浏览器下：
不使用 jQuery – event
和使用 jQuery – event 差别巨大，具体直接可见代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE下 event.target 探究</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* not use event as parameter */
$("#t1").delegate(".cont","click",function(){
// 这里 function 中的 event 是原生 DOM event 对象，所以各个浏览器实现的方式可能会有区别
alert(event.target); // return undefined
// 为了验证这个是 DOM event 使用如下代码可以看出。
// IE 独有 srcElement ，相当于 标准 DOM 中的 event.target
alert(event.srcElement); // return standard event.target
});
/* use event as parameter */
$("#t2").delegate(".cont","click",function(event){
// 这里 function 中的 event 是 jQuery 对 event 做了跨浏览器封装
// 在所有浏览器下效果一致
alert(event.target); // retrun standard event.target
});
});
</script>
</head>
<body>
<table id="t1">
<legend>element handler without parameter</legend>
<tr>
<td class="cont"><div><input type="checkbox" />333</div></td>
<td class="cont"><div><input type="checkbox" />333</div></td>
<td class="cont"><div><input type="checkbox" />333</div></td>
<td class="cont"><div><input type="checkbox" />333</div></td>
</tr>
</table>
<br />
<table id="t2">
<legend>element handler with parameter event</legend>
<tr>
<td class="cont"><div><input type="checkbox" />333</div></td>
<td class="cont"><div><input type="checkbox" />333</div></td>
<td class="cont"><div><input type="checkbox" />333</div></td>
<td class="cont"><div><input type="checkbox" />333</div></td>
</tr>
</table>
</body>
</html>
代码的运行效果已经在 return 中标志出来了。大家有时间的话可以拷贝代码运行一下。很容易就能够看出区别了。
这样提醒我们，假如以后再写事件处理函数的时候一定要记住在处理方法中加入 event参数。这样写起来事半功倍。不会造成跨浏览器的一些低级错误。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE 下 event.target 探究</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* not use event as parameter */
$("#t1").delegate(".cont","click",function(){
// 这里 function 中的 event 是原生 DOM event 对象，所以各个浏览器实现的方式可能会有区别
alert(event.target); // return undefined
// 为了验证这个是 DOM event 使用如下代码可以看出。
// IE 独有 srcElement ，相当于 标准 DOM 中的 event.target
alert(event.srcElement); // return standard event.target
});
/* use event as parameter */
$("#t2").delegate(".cont","click",function(event){
// 这里 function 中的 event 是 jQuery 对 event 做了跨浏览器封装
// 在所有浏览器下效果一致
alert(event.target); // retrun standard event.target
});
});
</script>
</head>
<body>
<table id="t1">
<legend>element handler without parameter</legend>
<tr>
<td class="cont"><div><input type="checkbox" />333</div></td>
<td class="cont"><div><input type="checkbox" />333</div></td>
<td class="cont"><div><input type="checkbox" />333</div></td>
<td class="cont"><div><input type="checkbox" />333</div></td>
</tr>
</table>
<br />
<table id="t2">
<legend>element handler with parameter event</legend>
<tr>
<td class="cont"><div><input type="checkbox" />333</div></td>
<td class="cont"><div><input type="checkbox" />333</div></td>
<td class="cont"><div><input type="checkbox" />333</div></td>
<td class="cont"><div><input type="checkbox" />333</div></td>
</tr>
</table>
</body>
</html>
来源：oschina
链接：https://my.oschina.net/u/253813/blog/62035