一)先来定义的用法
-
live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。
-
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。
提示:如需移除事件处理程序,请使用 off() 方法。
提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。
-
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。不具有动态绑定函数的使用总结:
总结整理上述两段英文的区别意思为:bind()函数是jQuery 1.7之前或更早版本采用的一个用来绑定事件处理程序的函数;on()函数是jQuery 1.7版本提供的首选的用来绑定事件处理程序的函数;从1.7版本的介绍以及参数描述来看,其实这两个函数基本上用法一致,但可能在早期的版本中,bind()函数一次只能为标签对象绑定一个事件的处理程序,而on()函数则可以一次为多个不同的事件绑定处理程序。
$("").bind(event,data,function) $("").live(event,data,function)//jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替 $("").on(event,childselector,data,function)//jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;
event:必需;添加到元素的一个或多个事件,例如 click等;
单事件处理:例如 $("").bind("click",data,function);
多事件处理:1.利用空格分隔多事件,例如 $("").bind("click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件,例如 $("").bind({event1:function, event2:function, ...})
data:选择项; 当一个事件被触发时要传递event.data给事件处理函数。
function:必需;该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
$(function () {
$('ul li').on('click',function(){
alert($(this).text())
});
})
这种情况你会发现点击第四个不具备事件.也就是不具备动态绑定事件能力
$(function () {
$('ul li').bind('click',function(){
alert($(this).text())
});
var ok = $('<li>4</li>');
$('ul').last().append(ok);
})
换成on的写法,添加selector属性,就是通过事件冒泡,进行了事件委托,把li的事件委托给其父元素,点击后面加入的li就默认绑定了事件
$(function () {
$('ul').on('click','li',function(){
alert($(this).text())
});
var ok = $('<li>4</li>');
$('ul').last().append(ok);
})
以上有部分内容参考一些博客。。。