jquery事件委托

发表于 jQuery 分类,标签:

一,.on( events [, selector ] [, data ], handler(eventObject) )   // .on( events [, selector ] [, data ] )


该方法取代了jQuery 之前的 .bind(), .delegate(), 和 .live()  方法,

.on() 可以直接进行事件绑定也可以进行时间委托

live方法 进行的事件委托是绑定在 document 上,  通过 event.target  和  event.type  判断元素

    .live( events, handler(eventObject) )       // jQuery 1.3+

    举例:

        $("#trigger").live("click", function(){ alert("Goodbye!"); });   



delegate方法进行事件委托是绑定在父元素上,执行速度要比live 快


    $(document).delegate("#trigger", "click", function(){ alert("Goodbye!"); }); 


on方法进行事件委托也是绑定在父元素上,只是为了兼容,第一个参数是事件类型, 第二个参数选择器,第三个是data ,第四个参数是回调函数,   

$(document).on("click", "#trigger", function(){ alert("Goodbye!"); });  



on 方法的其他用法

  1.  直接绑定事件

        $("#trigger").on("click", function(){  //  单事件绑定

        alert( $(this).text() ); 

        });

          

        $( "#trigger" ).on({                //  多事件绑定

          click: function() {

                $( this ).toggleClass( "active" );

                  },

                  mouseenter: function() {

                $( this ).addClass( "inside" );

                  },

                  mouseleave: function() {

                $( this ).removeClass( "inside" );

                  }

        });

        

        $("#trigger").on("click.myclick", function(){  //  命名空间

        alert( $(this).text() ); 

        });

    

  2.   取消表单提交动作

            $("form").on("submit", false);

            等于

     

        $("form").on("submit", function(event) {

              event.preventDefault();

        });

    

        阻止提交事件的冒泡行为

        $("form").on("submit", function(event) {

              event.stopPropagation();

        });


3.传递一个data数据给.trigger()的事件处理程序,作为第二个参数。

        

    $( "div" ).on( "click", function( event, person ) {   //(传递的一个data数据,此数据是一个对象)

           alert( "Hello, " + person.name );

    });

    $( "div" ).trigger( "click", { name: "Jim" } );


    $( "div" ).on( "click", function( event, salutation, name ) {  //(传递的多个data数据,此数据是数组形式传入)

         alert( salutation + ", " + name );

    });

    $( "div" ).trigger( "click", [ "Goodbye", "Jim" ] );


4.  向事件处理函数中传入数据,并且在事件处理函数中通过名字来获取传入的数据:

    

    $("p").on("click", {foo: "bar"}, function(event){

            alert(event.data.foo);

    });




二,.off( events [, selector ] [, handler ] )  //  on 方法对应移除事件处理函数。


  1.  .off( events [, selector ] [, handler ] )            //

  2.    events

                类型: String

              一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin"。

     selector

    类型: String

    一个选择器,当绑定事件处理程序时匹配最初传递给 .on()的那个。

    handler

    类型: Function( Event eventObject )

    以前附加的事件处理函数,或特殊值false。


    1. $("body").on("click", "p", foo);

    2. $("body").off("click", "p", foo); 

  3. .off( events [, selector ] )

    1. $("body").off("click", "p"); 

  4. .off( event )

    1. $("p").off( "click", "**" )

  5. .off()

    1. $("p").off( )



0 篇评论

发表我的评论