本文实例分析了jquery on()方法的用法。分享给大家供大家参考。具体分析如下：
一、jquery on()方法的使用：
on(events,[selector],[data],fn)
events:一个或多个用空格分隔的事件类型和可选的命名空间，如click或keydown.myplugin 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
二、jquery on()方法的优点：
1、提供了一种统一绑定事件的方法
2、仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()
三、与.bind(), .live(), .delegate()的比较：
1、其实.bind(), .live(), .delegate()都是通过.on()来实现的
复制代码 代码如下:
bind: function( types, data, fn ) {
        return this.on( types, null, data, fn );
    },
    unbind: function( types, fn ) {
        return this.off( types, null, fn );
    },    live: function( types, data, fn ) {
        jquery( this.context ).on( types, this.selector, data, fn );
        return this;
    },
    die: function( types, fn ) {
        jquery( this.context ).off( types, this.selector || **, fn );
        return this;
    },
    delegate: function( selector, types, data, fn ) {
        return this.on( types, selector, data, fn );
    },
    undelegate: function( selector, types, fn ) {
        // ( namespace ) or ( selector, types [, fn] )
        return arguments.length === 1 ? this.off( selector, ** ) : this.off( types, selector || **, fn );
    }
2、用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的dom元素上
3、不要再用.live()了，它已经不再被推荐了，而且还有许多问题
4、.delegate()会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上。
5、我们可以用.on()来代替上述的3种方法
四、jquery on()方法的使用示例
1、绑定click事件，使用off()方法移除on()所绑定的方法
复制代码 代码如下:
$(document).ready(function(){
$(p).on(click,function(){
$(this).css(background-color,pink);
});
$(button).click(function(){
$(p).off(click);
});
});
2、多个事件绑定同一个函数
复制代码 代码如下:
$(document).ready(function(){
  $(p).on(mouseover mouseout,function(){
    $(p).toggleclass(intro);
  });
});
3、多个事件绑定不同函数
复制代码 代码如下:
$(document).ready(function(){
  $(p).on({
    mouseover:function(){$(body).css(background-color,lightgray);}, 
    mouseout:function(){$(body).css(background-color,lightblue);},
    click:function(){$(body).css(background-color,yellow);} 
  });
});
4、绑定自定义事件
复制代码 代码如下:
$(document).ready(function(){
  $(p).on(myownevent, function(event, showname){
    $(this).text(showname + ! what a beautiful name!).show();
  });
  $(button).click(function(){
    $(p).trigger(myownevent,[anja]);
  });
});
5、传递数据到函数
复制代码 代码如下:
function handlername(event)
{
  alert(event.data.msg);
}$(document).ready(function(){
  $(p).on(click, {msg: you just clicked me!}, handlername)
});
6、适用于未创建的元素
复制代码 代码如下:
$(document).ready(function(){
  $(div).on(click,p,function(){
    $(this).slidetoggle();
  });
  $(button).click(function(){
    $(this is a new paragraph.
).insertafter(button);
  });
});
希望本文所述对大家的jquery程序设计有所帮助。