jquery的几种事件绑定方式

jquery的几种事件绑定方式: bind(),on(),live(),delegate()

1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；

2.bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()，替代函数为on(),这也是1.7版本新添加的函数，同样，可以

　用来代替live()函数，live()函数在1.9版本已经删除；

3.live()函数和delegate()函数两者类似，但是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()差些，想了解具体情况，请戳这：

　http://kb.cnblogs.com/page/94469/

4.bind()支持Jquery所有版本；live()支持jquery1.9-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；

推荐使用 .on()绑定事件的方式 :

1. on方法可以动态绑定添加到页面元素的事件

比如动态添加到页面的DOM元素，不用担心注册事件的元素什么时候被添加进来，也不用重复绑定

live(),bind(),delegate()底层都是使用的是on()

2 .on方法可以提升效率

$('li').click(function(){ alert(111);});

$(document).on('click','li',function(){ alert(222222)}); //经过测试效率会更高

3. on 的使用

-- 多个事件绑定一个函数

//多个事件绑定一个方法$(function(){$("p").on('mouseover mouseout',function(){alert(1111);});});

-- 多个事件绑定多个函数

//多个事件绑定不同的方法$(function(){$("a").on({mouseover:function(){$("t1").css('background-color','red');},mouseout:function(){$("t2").css('background-color','yellow');},click:function(){$("t3").css('background-color','blue');}});});

--绑定自定义事件

$(document).ready(function(){  $("p").on("myevent", function(event, showName){    $(this).text(showName + "! What a beautiful name!").show();  });  $("button").click(function(){    $("p").trigger("myevent",["helloworld"]);  });});

-- 传递数据到函数

//传递数据到函数function handlerName(event){  alert(event.data.msg);}$(document).ready(function(){  $("p").on("click", {msg: "You just clicked me!"}, handlerName)});

-- 用于未创建的元素

//适用于未创建的元素$(document).ready(function(){  $("div").on("click","p",function(){    $(this).slideToggle();  });  $("button").click(function(){    $("<p>This is a new paragraph.</p>").insertAfter("button");  });});

-- 如果需要移除on方法绑定的事件

//移除on方法绑定的事件  可以使用off方法$(document).ready(function(){$("p").on("click",function(){$(this).css("background-color","pink");});$("button").click(function(){$("p").off('click');});});