对于jq里的Event对象的方法一些理解

Posted 2020-08-10

这些是我从jq手册的Event对象一篇里获取的理解

 

event.currentTarget 

在事件冒泡阶段中的当前DOM元素

例子：

$("p").click(function(event) {

    alert( event.currentTarget === this ); // true  

});

概述：相当于this（DOM的）

 

event.data

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

 

例子：

$("a").each(function(i) {

    $(this).bind(‘click‘, {index:i}, function(e){

       alert(‘my index is ‘ + e.data.index);

    });

  });

概述：不太清楚，貌似可以获取对象的属性

 

event.delegateTarget

当currently-called的jQuery事件处理程序附加元素。

例子：

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

概述：delegateTarget是例子中的.box而不是它里面的button

 

event.isDefaultPrevented()

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

例子：

$("a").click(function(event){

    alert( event.isDefaultPrevented() ); // false

    event.preventDefault();

    alert( event.isDefaultPrevented() ); // true

  });

概述：没什么好说的

 

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);

  });

概述：又一个没什么好说的

 

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);

  });

概述：这三个函数下面会说到的

 

event.namespace

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

例子：

$("p").bind("test.something", function(event) {

    alert( event.namespace );  });

  $("button").click(function(event) {

    $("p").trigger("test.something");

  });

概述：相当于给事件一个副名

 

event.pageX

鼠标相对于文档的左边缘的位置。

例子:

$("p").on("click", function(a){

alert(a.pageX);

});

概述：记得加上事件对象（例子中的a）

 

 

event.pageY

鼠标相对于文档的上边缘的位置。

例子：

$("p").on("click", function(a){

alert(a.pageY);

});

概述：同上

 

event.preventDefault()

阻止默认事件行为的触发。

例子：

$("a").on("click", function(a){

a.preventDefault();

alert(a.pageX);

});

概述：首先它只能阻止默认事件（比如a链接的跳转，提交按钮的提交行为） 另外它也需要事件对象（例子中的a）

 

event.relatedTarget

在事件中涉及的其它任何DOM元素

例子：

$("a").mouseout(function(event) {

    alert(event.relatedTarget.nodeName); // "DIV"

  });

概述： 指事件对应的对象 各个事件的对应方式不一样 比如对于 mouseout 事件，它指向被进入的元素；对于 mousein 事件，它指向被离开的元素。它也需要事件对象

 

 

event.result

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

例子：

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

概述：前面的点击事件返回了一个值，后面的result可以获取其值。这种方式稍显麻烦，但是有时也是有用的

 

event.stopImmediatePropagation()

阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。

例子：

$(document).ready(function(){

$("div").click(function(event){

alert("事件句柄 1 被执行");

});

$("div").click(function(event){

event.stopImmediatePropagation();

alert("事件句柄 2 被执行");

});

$("div").click(function(event){

alert("事件句柄 3 被执行");

});

});

概述：简单来说就是制止后面会发生的事件

event.stopPropagation()

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

例子：

$("p").click(function(event){

    event.stopPropagation();    // do something

  });

概述：点击子元素，触发了子点击事件，但父元素的父点击事件也会触发，这个方法就是为了阻止那种情况（这个情况叫做冒泡事件）

 

event.target

最初触发事件的DOM元素。

例子：

Html：

<div id="n1" style="height: 100px; background: #eee;" >

    <br>

    <p id="n2" style="background: #999;" >段落文本...段落文本...<br>

        <span id="n3" style="background: #fff;" >专注于编程开发技术分享</span>

</p>

</div>

Jq：

$("div").click( function(event) {

    alert("最初触发事件的是:" + event.target.tagName + "#" + event.target.id);  

} );

概述：对应冒泡情况用的，获取真正触发的元素

event.timeStamp

这个属性返回事件触发时距离1970年1月1日的毫秒数。（貌似火狐不能用）

这可以很方便的检测某个jQuery函数的性能。

例子：

$(document).ready(function(){

  $("button").click(function(event){

    $("span").text(event.timeStamp);

  });

});

概述：上面的描述已经很清楚了

event.type

这个事件的事件类型

例子：

$("a").click(function(event) {

    alert(event.type); // "click"

  });

概述：无需语赘

event.which

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

例子：

<!DOCTYPE html>

  <html>

  <head>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

  </head>

  <body>

      <input id="whichkey" value="type something">

      <div id="log"></div>

      <script>

        $(‘#whichkey‘).bind(‘keydown‘,function(e){

        $(‘#log‘).html(e.type + ‘: ‘ +  e.which );  });

      </script>

    </body>

  </html>

概述：能获取键值