jquery事件对象属性

野性酷女 2022-10-01 13:44 133阅读 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="margin:0px; padding:0px; border:1px solid rgb(192,192,192); border-collapse:collapse; color:rgb(0,0,0); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:19px; text-align:left; background-color:rgb(254,254,242); height:933px"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <span style="margin:0px; padding:0px">属性名称</span></td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <span style="margin:0px; padding:0px">描述</span></td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <span style="margin:0px; padding:0px">举例</span></td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <h5 style="margin:15px auto 2px; padding:0px; font-size:13px; color:rgb(51,51,51)"> type</h5> </td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> 事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click.</td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word">$("a").click(function(event) {
            alert(event.type);
            });</pre> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <h5 style="margin:15px auto 2px; padding:0px; font-size:13px; color:rgb(51,51,51)"> target</h5> </td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> 获取事件触发者DOM对象</td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word">$("a[href=http://google.com]").click(function(event) {
            alert(event.target.href);
            });</pre> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <h5 style="margin:15px auto 2px; padding:0px; font-size:13px; color:rgb(51,51,51)"> data</h5> </td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> 事件调用时传入额外参数.</td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word">$("a").each(function(i) {
            $(this).bind('click', {index:i}, function(e){
            alert('my index is ' + e.data.index);
            });
            });</pre> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <h5 style="margin:15px auto 2px; padding:0px; font-size:13px; color:rgb(51,51,51)"> relatedTarget</h5> </td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> 对于鼠标事件, 标示触发事件时离开或者进入的DOM元素</td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word">$("a").mouseout(function(event) {
            alert(event.relatedTarget);
            });</pre> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <h5 style="margin:15px auto 2px; padding:0px; font-size:13px; color:rgb(51,51,51)"> currentTarget</h5> </td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> 冒泡前的当前触发事件的DOM对象, 等同于this.</td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word">$("p").click(function(event) {
            alert( event.currentTarget.nodeName );
            });</pre> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:1.5; font-size:13px"> 结果:P</p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <h5 style="margin:15px auto 2px; padding:0px; font-size:13px; color:rgb(51,51,51)"> pageX/Y</h5> </td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> 鼠标事件中, 事件相对于页面原点的水平/垂直坐标.</td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word">$("a").click(function(event) {
            alert("Current mouse position: " + event.pageX + ", " + event.pageY );
            });</pre> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <h5 style="margin:15px auto 2px; padding:0px; font-size:13px; color:rgb(51,51,51)"> result</h5> </td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> 上一个事件处理函数返回的值</td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word">$("p").click(function(event) {
            return "hey"
            });
            $("p").click(function(event) {
            alert( event.result );
            });</pre> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:1.5; font-size:13px"> 结果:”hey”</p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <h5 style="margin:15px auto 2px; padding:0px; font-size:13px; color:rgb(51,51,51)"> timeStamp</h5> </td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> 事件发生时的时间戳.</td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word">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实战”一书中还提供了下面的多浏览器支持的属性, 时间关系我没有尝试每一个属性, 大家可以帮忙验证是否在所有浏览器下可用:

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

<table style="margin:0px; padding:0px; border:1px solid rgb(192,192,192); border-collapse:collapse; color:rgb(0,0,0); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:19px; text-align:left; background-color:rgb(254,254,242); height:699px"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <span style="margin:0px; padding:0px">名称</span></td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <span style="margin:0px; padding:0px">说明</span></td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <span style="margin:0px; padding:0px">举例</span></td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <h5 style="margin:15px auto 2px; padding:0px; font-size:13px; color:rgb(51,51,51)"> preventDefault()</h5> </td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> 取消可能引起任何语意操作的事件. 比如&lt;a&gt;元素的href链接加载, 表单提交以及click引起复选框的状态切换.</td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word">$("a").click(function(event){
            event.preventDefault();
            // do something
            });</pre> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <h5 style="margin:15px auto 2px; padding:0px; font-size:13px; color:rgb(51,51,51)"> isDefaultPrevented()</h5> </td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> 是否调用过 <p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:1.5; font-size:13px"> &nbsp;</p> <h5 style="margin:15px auto 2px; padding:0px; font-size:13px; color:rgb(51,51,51)"> preventDefault()</h5> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:1.5; font-size:13px"> 方法</p> </td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word">$("a").click(function(event){
            alert( event.isDefaultPrevented() );
            event.preventDefault();
            alert( event.isDefaultPrevented() );
            });</pre> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <h5 style="margin:15px auto 2px; padding:0px; font-size:13px; color:rgb(51,51,51)"> stopPropagation()</h5> </td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> 取消事件冒泡</td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word">$("p").click(function(event){
            event.stopPropagation();
            // do something
            });</pre> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <h5 style="margin:15px auto 2px; padding:0px; font-size:13px; color:rgb(51,51,51)"> isPropagationStopped()</h5> </td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> 是否调用过 <p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:1.5; font-size:13px"> &nbsp;</p> <h5 style="margin:15px auto 2px; padding:0px; font-size:13px; color:rgb(51,51,51)"> stopPropagation()</h5> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:1.5; font-size:13px"> 方法</p> </td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word">$("p").click(function(event){
            alert( event.isPropagationStopped() );
            event.stopPropagation();
            alert( event.isPropagationStopped() );
            });</pre> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <h5 style="margin:15px auto 2px; padding:0px; font-size:13px; color:rgb(51,51,51)"> stopImmediatePropagation()</h5> </td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> 取消执行其他的事件处理函数并取消事件冒泡.如果同一个事件绑定了多个事件处理函数, 在其中一个事件处理函数中调用此方法后将不会继续调用其他的事件处理函数.</td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word">$("p").click(function(event){
            event.stopImmediatePropagation();
            });
            $("p").click(function(event){
            // This function won't be executed
            });</pre> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <h5 style="margin:15px auto 2px; padding:0px; font-size:13px; color:rgb(51,51,51)"> isImmediatePropagationStopped()</h5> </td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> 是否调用过 <p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:1.5; font-size:13px"> &nbsp;</p> <h5 style="margin:15px auto 2px; padding:0px; font-size:13px; color:rgb(51,51,51)"> stopImmediatePropagation()</h5> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:1.5; font-size:13px"> 方法</p> </td> 
   <td style="margin:0px; padding:3px; border:1px solid rgb(192,192,192); border-collapse:collapse; word-break:normal!important"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word">$("p").click(function(event){
            alert( event.isImmediatePropagationStopped() );
            event.stopImmediatePropagation();
            alert( event.isImmediatePropagationStopped() );
            });</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

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