JavaScript/jQuery中的Event

在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对象有哪些属性和方法

下面是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。为精确计算结果，请在补白、边框和填充。

<script type="text/javascript"></script><script src="cache/tag/hottags_forum_cache_jsonp.txt" type="text/javascript"></script><script type="text/javascript"></script>