码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-09-26 00:39:30      阅读:379      评论:0      收藏:0      [点我收藏+]

标签:

这些是我从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>

概述:能获取键值

 

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

标签:

原文地址:http://www.cnblogs.com/zhiwudenengliang/p/5907600.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!