zoukankan      html  css  js  c++  java
  • 对于jq里的Event对象的方法一些理解

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

    概述:能获取键值

     

  • 相关阅读:
    MS SQL日期處理
    VS2005快捷键大全
    聯接遠程務器進行操作
    Zune XNA 开发(一,Hello Zune)
    Silverlight for Google Picasa
    Moonlight已经可以下载,目前是0.6版
    Silverlight 2 Beta 2发布
    在Silverlight 2 beta1中使用IronPython等动态语言
    如何在现有通过AttachDbFilename连接的Sql Express数据库上设置membership
    XNA Game Studio 3.0 CTP让Zune不仅仅是媒体播放器
  • 原文地址:https://www.cnblogs.com/zhiwudenengliang/p/5907600.html
Copyright © 2011-2022 走看看