jQuery慢慢啃之事件对象（十一）

1.event.currentTarget//在事件冒泡阶段中的当前DOM元素 

$("p").click(function(event) {
    alert( event.currentTarget === this ); // true  
});  

2.event.data//当前执行的处理器被绑定的时候，包含可选的数据传递给jQuery.fn.bind。

$("a").each(function(i) {
    $(this).bind('click', {index:i}, function(e){
       alert('my index is ' + e.data.index);
    });
  }); 

 

3.event.delegateTarget//当currently-called的jQuery事件处理程序附加元素。

$(".box").on("click", "button", function(event) {
  $(event.delegateTarget).css("background-color", "red");
}); 

// 为id为element的元素中的所有span元素绑定click事件
$("#element").on( "click", "span", function(event){
    // event.delegateTarget 就是id为element的DOM元素
    // this 就是当前触发事件的span元素
    alert( event.delegateTarget === this); // false 
} );


// 为id为element的元素中的所有span元素绑定click事件
$("#element span").bind( "click", function(event){
    // event.delegateTarget 就是当前触发事件的span元素
    // this 就是当前触发事件的span元素
    alert( event.delegateTarget === this ); // true
} );

 

4.event.isDefaultPrevented()//根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值

$("a").click(function(event){
    alert( event.isDefaultPrevented() ); // false
    event.preventDefault();
    alert( event.isDefaultPrevented() ); // true
  });  

 

5.event.isImmediatePropagationStopped()//根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值。

   function immediatePropStopped(e) {
    var msg = "";
    if ( e.isImmediatePropagationStopped() ) {
      msg =  "called";
    } else {
      msg = "not called";
    }
    $("#stop-log").append( "<div>" + msg + "</div>" );
   }
    $("button").click(function(event) {
    immediatePropStopped(event);
    event.stopImmediatePropagation();
    immediatePropStopped(event);
  });

 

6.event.isPropagationStopped()//根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值。

    function propStopped(e) {
    var msg = "";
    if ( e.isPropagationStopped() ) {
      msg =  "called";
    } else {
      msg = "not called";
    }
    $("#stop-log").append( "<div>" + msg + "</div>" );
  }
    $("button").click(function(event) {
    propStopped(event);
    event.stopPropagation();
    propStopped(event);
  });

 

7.event.namespace//当事件被触发时此属性包含指定的命名空间。

  $("p").bind("test.something", function(event) {
    alert( event.namespace );  });
  $("button").click(function(event) {
    $("p").trigger("test.something");
  });

8.event.pageX//鼠标相对于文档的左边缘的位置。

  event.pageX//鼠标相对于文档的左边缘的位置。

   $(document).bind('mousemove',function(e){
       $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
   });

 

9.event.preventDefault()//阻止默认事件行为的触发。

            $("a").click(function(event) {
               event.preventDefault();
               $('<div/>').append('default ' + event.type + ' prevented').appendTo('#log');
             });

 

10.event.relatedTarget//在事件中涉及的其它任何DOM元素

对于 mouseout 事件，它指向被进入的元素；对于 mousein 事件，它指向被离开的元素。

$("a").mouseout(function(event) {
    alert(event.relatedTarget.nodeName); // "DIV"
  }); 

 

11.event.result//这个属性包含了当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined 。

      $("button").click(function(event) {    return "hey";  });
       $("button").click(function(event) {
           $("p").html( event.result );
       });

12.event.stopImmediatePropagation()//阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。

  $("p").click(function(event){
    event.stopImmediatePropagation();
  });  $("p").click(function(event){
    // This function won't be executed
    $(this).css("background-color", "#f00");  });
    $("div").click(function(event) {
    // This function will be executed
      $(this).css("background-color", "#f00");
  });

13.event.stopPropagation()//防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。

$("p").click(function(event){
    event.stopPropagation();    // do something
  });  

 

14.event.target//最初触发事件的DOM元素。

function handler(event) {
    var $target = $(event.target);
    if( $target.is("li") ) {
      $target.children().toggle();
    }
  }
  $("ul").click(handler).find("ul").hide();

15.event.timeStamp//这个属性返回事件触发时距离1970年1月1日的毫秒数。

 var last, diff;  $('div').click(function(event) {
    if ( last ) {
      diff = event.timeStamp - last;
      $('div').append('time since last event: ' + diff + '<br/>');
    } else {
      $('div').append('Click again.<br/>');
    }
    last = event.timeStamp;
  });

 

16.event.type//事件类型

$("a").click(function(event) {
    alert(event.type); // "click"
  }); 

 

17.event.which//针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。

      <script>
        $('#whichkey').bind('keydown',function(e){
        $('#log').html(e.type + ': ' +  e.which );  });
      </script>