event 兼容性理解及jquery的处理

 

兼容性的理解 

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

1.keyCode||which||charCode

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

var e = window.event || arguments.callee.caller.arguments[0];;
var currKey = e.keyCode || e.which || e.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对象有哪些属性和方法

 

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

属性名称 描述 举例 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;
}); 

 

名称 说明 举例 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:对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标

 

来自：http://www.cnblogs.com/Denny_Yang/archive/2012/10/24/2737299.html