jQuery提供了多种绑定事件的方式,而每种方式各有其特点,了解它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出更容易维护和理解的代码。jQuery中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。
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现在使用比较多。
要每天多努力一些,比别人多努力一个小时。