jQuery提供了多种绑定事件的方式,而每种方式各有其特点,了解它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出更容易维护和理解的代码。
jQuery中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。
第一种:bind() 向被选元素添加的一个或多个事件,以及当事件发生时运行的函数。
函数调用形式:$("selector").bind(event,[data],function) (data是可选的,规定传递到函数的额外数据)
<body> <ul id="list"> <li>手机</li> <li>电脑</li> <li>电视</li> </ul> <button>添加</button> </body>
<script>
$("button").click(function(){
var inner=$("#list").html();
inner+="<li>增加</li>";
$("#list").html(inner);
})
</script>
一对一:
$("li").bind("click",function(){ $(this).css({"background":"red"}) })
一对多:
$("li").bind("click mouseout dbclick",function(){ $(this).css({"background":"red"}) });
多对多:
$("li").bind({"click":function(){ $(this).css({"background":"red"}); },"mouseout":function(){ $(this).css({"color":"white"}) }});
第二种:live() 用法可参考bind,这里需要注意一点,bind只能给已经存在的元素绑定事件,而live还能给未来的元素绑定事件
$("li").live("click",function(){ $(this).css({"background":"red"}); })
jQuery官方已宣布在1.7版本开始废弃live,改用其他方式代替。
第三种 : delegate()
函数调用形式: delegate(childSelector,event,data,function)
实际上,这就是事件委托,可以理解为把子元素的活委托给父元素,并且这种方式也可以绑定未来元素(脚本生成的元素)
$("ul").delegate("li","click",function(){ $(this).css({"background":"red"}); });
第四种:on()
函数调用形式: on(event,childSelector,data,function);
实际上,就是把delegate的俩个参数位置调换了,实例如下:
$("ul").on("click","li",function(){ $(this).css({"background":"red"}); });
on 绑定多个事件 并且调用不同函数
$(document).ready(function(){ $("p").on({"click":function(){ $(this).css({"background":"yellow"}); },"mouseover":function(){ $(this).css({"color":"red"}) }}); });
总结一些:
bind是比较早的一种绑定事件的方式,1,7后官方并不推荐使用,并且除了bind以外,live、delegate、on都支持对未来元素的绑定。
live 比 delegate性能差些,on现在使用比较多。