对比Jquery封装的event对象和JS原生event对象的使用

有些不是很准确，参考官网http://api.jquery.com/category/events/ 

属性名称	描述	举例
type	事件类型.若是使用一个事件处理函数来处理多个事件, 可使用此属性得到事件类型,好比click.	$("a").click(function(event) { alert(event.type); });
target	获取事件触发者DOM对象	$("a[href=http://google.com]").click(function(event) { alert(event.target.href); });
data	事件调用时传入额外参数.	$("a").each(function(i) { $(this).bind('click', {index:i}, function(e){ alert('my index is ' + e.data.index); }); });
relatedTarget	对于鼠标事件, 标示触发事件时离开或者进入的DOM元素	$("a").mouseout(function(event) { alert(event.relatedTarget); });
currentTarget	冒泡前的当前触发事件的DOM对象, 等同于this.	$("p").click(function(event) { alert( event.currentTarget.nodeName ); }); 结果:P
pageX/Y	鼠标事件中, 事件相对于页面原点的水平/垂直坐标.	$("a").click(function(event) { alert("Current mouse position: " + event.pageX + ", " + event.pageY ); });
result	上一个事件处理函数返回的值	$("p").click(function(event) { return "hey" }); $("p").click(function(event) { alert( event.result ); }); 结果:"hey"
timeStamp	事件发生时的时间戳.	var last; $("p").click(function(event) { if( last ) alert( "time since last event " + event.timeStamp - last ); last = event.timeStamp; });

下面是jQuery事件对象能够在扩浏览器支持的属性:

名称	说明	举例
preventDefault()	取消可能引发任何语意操做的事件. 好比<a>元素的href连接加载, 表单提交以及click引发复选框的状态切换.	$("a").click(function(event){ event.preventDefault(); // do something });
isDefaultPrevented()	是否调用过  preventDefault() 方法	$("a").click(function(event){ alert( event.isDefaultPrevented() ); event.preventDefault(); alert( event.isDefaultPrevented() ); });
stopPropagation()	取消事件冒泡	$("p").click(function(event){ event.stopPropagation(); // do something });
isPropagationStopped()	是否调用过  stopPropagation() 方法	$("p").click(function(event){ alert( event.isPropagationStopped() ); event.stopPropagation(); alert( event.isPropagationStopped() ); });
stopImmediatePropagation()	取消执行其余的事件处理函数并取消事件冒泡. 若是同一个事件绑定了多个事件处理函数, 在其中一个事件处理函数中调用此方法后将不会继续调用其余的事件处理函数.	$("p").click(function(event){ event.stopImmediatePropagation(); }); $("p").click(function(event){ // This function won't be executed });
isImmediatePropagationStopped()	是否调用过  stopImmediatePropagation() 方法	$("p").click(function(event){ alert( event.isImmediatePropagationStopped() ); event.stopImmediatePropagation(); alert( event.isImmediatePropagationStopped() ); });

这些函数中 stopPropagation() 是咱们最长用的也是必定会用到的函数. 至关于操做原始event对象的event.cancelBubble=true来取消冒泡.

___________________________________________________________________________

offset()：获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
position()：获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充

JQuery读书笔记–Event属性说明

JQuery事件中的Event属性是常常性的被忽略的。大多数时间你的确不怎么用它，但有些时候它仍是它仍是有做用的。如获知触发 
时用户的环境（是否按了shift etc）。每一个浏览器对event都有不一样的地方，Jquery对Event作了标准化因此能够放心用。 
* 。target 这个反应触发事件的DOM对象，能够在事件冒泡的时候判断是不是事件源头(compare event.target to 
this) 
* .pageX: 鼠标的left属性，相对于page 
* .pageY: 鼠标的top属性，相对于page 
* preventDefault(): 这个方法被调用，则原有事件就被忽略。（例如 clicked link就不会去新的Url了） 
* stopPropagation():让Jquery中止事件冒泡 
* .Data: 若是事件中还有EventData你就能够用这个属性得到对应Eventdata数据了。 
* ctrlKey: 类型: Boolean, 说明: Ctrl 键是否按下 
* shiftKey: 类型: Boolean, 说明: Shift键是否按下 
* altKey: 类型: Boolean, 说明: Alt 键是否按下 
* charCode: 类型: Number, 说明: 最后响应键盘按键的 charCode 值 
* keyCode: 类型: Number, 说明: 最后响应键盘按键的 keyCode 值 
* button: 类型: Number, 说明: 按下的鼠标键, 左键:1, 右键:2, 中键:4 
* which: 类型: Number, 说明: 最后响应的是哪一个按键, 若是是键盘按键则等于 charCode || keyCode; 若是是鼠标按 
键, 左键:1, 右键:3, 中键2 
type : 事件类型 
relatedTarget:对于鼠标事件, 标示触发事件时离开或者进入的DOM元素 
currentTarget:冒泡前的当前触发事件的DOM对象, 等同于this. 
result: 上一个事件处理函数返回的值 
screenX/Y:对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标

 

___________________________________________________________________________

 

在javascript中，咱们要经常用到event对象来处理一些事件，可是IE和Firefox下event对象的属性是不一样的。

1.keyCode||which||charCode

IE下支持keyCode，不支持which，charCode。
Firefox下支持keyCode，除功能键外，其余键值始终为0，Firefox下支持which和charCode属性

2.event.srcElement||event.target

在IE下，event对象有srcElement属性，没有target属性。在火狐下，event对象有target属性，没有srcElement属性

3.event.x,event.y||event.pageX,event.pageY

IE下event对象有event.x,event.y属性，而Firefox下没有。Firefox下有event.pageX,event.PageY属性，而IE下没有。解决办法：
var mx = event.x?event.x:event.pageX;

4.attachEvent()||addEventListener()

IE下支持attachEvent()方法，而Firefox下支持addEventListener()方法。
attachEvent("eventType",fun)
eventType是指事件类型,fun是指调用事件的函数
addEventListener("eventType",fun,flag)
addEventListener方法的前两个参数和attachEvent方法同样，flag参数则是一个 Boolean 值，指明该结点是否以DOM中所谓的捕捉模式来侦听事件。对于一个典型的事件侦听器来讲，第三个参数应该为false（假）。
我所知道的经常使用的event属性或方法就是上面那4条。上面的东西虽然不复杂，可是我会常常遗忘，jQuery则帮咱们很好的解决了这些问题，咱们经过jQuery无需再去判断浏览器是否支持某某属性，某某方法。
首先看看jQuery对象有哪些属性和方法