jquery 事件对象属性小结

一时失言乱红尘 2022-08-03 03:12 218阅读 0赞

JQuery事件中的Event属性是经常性的被忽略的。大多数时间你的确不怎么用它，但有些时候它还是它还是很有作用的。

使用事件自然少不了事件对象.  因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象.

jQuery中统一了事件对象,  当绑定事件处理函数时,  会将jQuery格式化后的事件对象作为唯一参数传入:

$("#testDiv").bind("click", function(event) { });

关于event对象的详细说明, 可以参考jQuery官方文档: [http://docs.jquery.com/Events/jQuery.Event][http_docs.jquery.com_Events_jQuery.Event]

jQuery事件对象将不同浏览器的差异进行了合并, 比如可以在所有浏览器中通过 event.target 属性来获取事件的触发者(在IE中使用原生的事件对象, 需要访问event.srcElement).  
  
**下面是jQuery事件对象可以在扩浏览器支持的属性:**

<table style="border-collapse:collapse; border-spacing:0px; padding:0px; margin:0px; clear:both; font-size:12px!important"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> <strong>属性名称</strong></td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> <strong>描述举例</strong></td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> type</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> 事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click. <pre style="margin:3px auto 0px; padding:0px 0px 0px 5px; font-family:'Courier New',Courier,monospace; border-left-color:rgb(108,226,108); border-left-width:3px; border-left-style:solid; width:640px; clear:both; line-height:20px; background:rgb(255,255,255)">$("a").click(function(event) { 
alert(event.type); 
});</pre> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> target</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> 获取事件触发者DOM对象 <pre style="margin:3px auto 0px; padding:0px 0px 0px 5px; font-family:'Courier New',Courier,monospace; border-left-color:rgb(108,226,108); border-left-width:3px; border-left-style:solid; width:640px; clear:both; line-height:20px; background:rgb(255,255,255)">$("a[href=http://google.com]").click(function(event) { 
alert(event.target.href); 
});</pre> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> data</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> 事件调用时传入额外参数. <pre style="margin:3px auto 0px; padding:0px 0px 0px 5px; font-family:'Courier New',Courier,monospace; border-left-color:rgb(108,226,108); border-left-width:3px; border-left-style:solid; width:640px; clear:both; line-height:20px; background:rgb(255,255,255)">$("a").each(function(i) { 
$(this).bind('click', {index:i}, function(e){ 
alert('my index is ' + e.data.index); 
}); 
});</pre> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> relatedTarget</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> 对于鼠标事件, 标示触发事件时离开或者进入的DOM元素 <pre style="margin:3px auto 0px; padding:0px 0px 0px 5px; font-family:'Courier New',Courier,monospace; border-left-color:rgb(108,226,108); border-left-width:3px; border-left-style:solid; width:640px; clear:both; line-height:20px; background:rgb(255,255,255)">$("a").mouseout(function(event) { 
alert(event.relatedTarget); 
});</pre> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> currentTarget</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> 冒泡前的当前触发事件的DOM对象, 等同于this. <pre style="margin:3px auto 0px; padding:0px 0px 0px 5px; font-family:'Courier New',Courier,monospace; border-left-color:rgb(108,226,108); border-left-width:3px; border-left-style:solid; width:640px; clear:both; line-height:20px; background:rgb(255,255,255)">$("p").click(function(event) { 
alert( event.currentTarget.nodeName ); 
});</pre> <p style="margin-top:0px; margin-bottom:0px; padding-top:5px; padding-bottom:5px"> 结果:P</p> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> pageX/Y</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> 鼠标事件中, 事件相对于页面原点的水平/垂直坐标. <pre style="margin:3px auto 0px; padding:0px 0px 0px 5px; font-family:'Courier New',Courier,monospace; border-left-color:rgb(108,226,108); border-left-width:3px; border-left-style:solid; width:640px; clear:both; line-height:20px; background:rgb(255,255,255)">$("a").click(function(event) { 
alert("Current mouse position: " + event.pageX + ", " + event.pageY ); 
});</pre> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> result</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> 上一个事件处理函数返回的值 <pre style="margin:3px auto 0px; padding:0px 0px 0px 5px; font-family:'Courier New',Courier,monospace; border-left-color:rgb(108,226,108); border-left-width:3px; border-left-style:solid; width:640px; clear:both; line-height:20px; background:rgb(255,255,255)">$("p").click(function(event) { 
return "hey" 
}); 
$("p").click(function(event) { 
alert( event.result ); 
});</pre> <p style="margin-top:0px; margin-bottom:0px; padding-top:5px; padding-bottom:5px"> 结果:”hey”</p> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> timeStamp</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> 事件发生时的时间戳. <pre style="margin:3px auto 0px; padding:0px 0px 0px 5px; font-family:'Courier New',Courier,monospace; border-left-color:rgb(108,226,108); border-left-width:3px; border-left-style:solid; width:640px; clear:both; line-height:20px; background:rgb(255,255,255)">var last; 
$("p").click(function(event) { 
if( last ) 
alert( "time since last event " + event.timeStamp - last ); 
last = event.timeStamp; 
});</pre> </td> 
  </tr> 
 </tbody> 
</table>

上面是jQuery官方文档中提供的event对象的属性. 在”jQuery实战”一书中还提供了下面的多浏览器支持的属性, 时间关系我没有尝试每一个属性, 大家可以帮忙验证是否在所有浏览器下可用:

<table style="border-collapse:collapse; border-spacing:0px; padding:0px; margin:0px; clear:both; height:317px; font-size:12px!important"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> <strong>属性名称</strong></td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> <strong>描述</strong></td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> altKey</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> Alt键是否被按下. 按下返回true</td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> ctrlKey</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> ctrl键是否被按下, 按下返回true</td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> metaKey</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> Meta键是否被按下, 按下返回true.<br> meta键就是PC机器的Ctrl键,或者Mac机器上面的Command键</td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> shiftKey</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> Shift键是否被按下, 按下返回true</td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> keyCode</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> 对于keyup和keydown事件返回被按下的键. 不区分大小写, a和A都返回65.对于keypress事件请使用which属性, 因为which属性跨浏览时依然可靠.</td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> which</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> 对于键盘事件, 返回触发事件的键的数字编码. 对于鼠标事件, 返回鼠标按键号(1左,2中,3右).</td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> screenX/Y</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> 对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标</td> 
  </tr> 
 </tbody> 
</table>

事件对象除了拥有属性, 还拥有事件. 有一些是一定会用到的事件比如取消冒泡 stopPropagation() 等.下面是jQuery事件对象的函数列表:

<table style="border-collapse:collapse; border-spacing:0px; padding:0px; margin:0px; clear:both; font-size:12px!important"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> <strong>名称</strong></td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> <strong>说明举例</strong></td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> preventDefault()</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> 取消可能引起任何语意操作的事件. 比如&lt;a&gt;元素的href链接加载, 表单提交以及click引起复选框的状态切换. <pre style="margin:3px auto 0px; padding:0px 0px 0px 5px; font-family:'Courier New',Courier,monospace; border-left-color:rgb(108,226,108); border-left-width:3px; border-left-style:solid; width:640px; clear:both; line-height:20px; background:rgb(255,255,255)">$("a").click(function(event){ 
event.preventDefault(); 
// do something 
});</pre> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> isDefaultPrevented()</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> 是否调用过 <p style="margin-top:0px; margin-bottom:0px; padding-top:5px; padding-bottom:5px"> &nbsp;</p> preventDefault() <p style="margin-top:0px; margin-bottom:0px; padding-top:5px; padding-bottom:5px"> 方法</p> <pre style="margin:3px auto 0px; padding:0px 0px 0px 5px; font-family:'Courier New',Courier,monospace; border-left-color:rgb(108,226,108); border-left-width:3px; border-left-style:solid; width:640px; clear:both; line-height:20px; background:rgb(255,255,255)">$("a").click(function(event){ 
alert( event.isDefaultPrevented() ); 
event.preventDefault(); 
alert( event.isDefaultPrevented() ); 
});</pre> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> stopPropagation()</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> 取消事件冒泡 <pre style="margin:3px auto 0px; padding:0px 0px 0px 5px; font-family:'Courier New',Courier,monospace; border-left-color:rgb(108,226,108); border-left-width:3px; border-left-style:solid; width:640px; clear:both; line-height:20px; background:rgb(255,255,255)">$("p").click(function(event){ 
event.stopPropagation(); 
// do something 
});</pre> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> isPropagationStopped()</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> 是否调用过 <p style="margin-top:0px; margin-bottom:0px; padding-top:5px; padding-bottom:5px"> &nbsp;</p> stopPropagation() <p style="margin-top:0px; margin-bottom:0px; padding-top:5px; padding-bottom:5px"> 方法</p> <pre style="margin:3px auto 0px; padding:0px 0px 0px 5px; font-family:'Courier New',Courier,monospace; border-left-color:rgb(108,226,108); border-left-width:3px; border-left-style:solid; width:640px; clear:both; line-height:20px; background:rgb(255,255,255)">$("p").click(function(event){ 
alert( event.isPropagationStopped() ); 
event.stopPropagation(); 
alert( event.isPropagationStopped() ); 
});</pre> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> stopImmediatePropagation()</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> 取消执行其他的事件处理函数并取消事件冒泡.如果同一个事件绑定了多个事件处理函数, 在其中一个事件处理函数中调用此方法后将不会继续调用其他的事件处理函数. <pre style="margin:3px auto 0px; padding:0px 0px 0px 5px; font-family:'Courier New',Courier,monospace; border-left-color:rgb(108,226,108); border-left-width:3px; border-left-style:solid; width:640px; clear:both; line-height:20px; background:rgb(255,255,255)">$("p").click(function(event){ 
event.stopImmediatePropagation(); 
}); 
$("p").click(function(event){ 
// This function won't be executed 
});</pre> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> isImmediatePropagationStopped()</td> 
   <td style="margin:0px; padding:8px; font-size:14px; line-height:24px"> 是否调用过 <p style="margin-top:0px; margin-bottom:0px; padding-top:5px; padding-bottom:5px"> &nbsp;</p> stopImmediatePropagation() <p style="margin-top:0px; margin-bottom:0px; padding-top:5px; padding-bottom:5px"> 方法</p> <pre style="margin:3px auto 0px; padding:0px 0px 0px 5px; font-family:'Courier New',Courier,monospace; border-left-color:rgb(108,226,108); border-left-width:3px; border-left-style:solid; width:640px; clear:both; line-height:20px; background:rgb(255,255,255)">$("p").click(function(event){ 
alert( event.isImmediatePropagationStopped() ); 
event.stopImmediatePropagation(); 
alert( event.isImmediatePropagationStopped() ); 
});</pre> </td> 
  </tr> 
 </tbody> 
</table>

这些函数中  stopPropagation()  是我们最长用的也是一定会用到的函数. 相当于操作原始event对象的event.cancelBubble=true来取消冒泡.

http://www.jb51.net/article/23228.htm

[http_docs.jquery.com_Events_jQuery.Event]: http://docs.jquery.com/Events/jQuery.Event