您的位置：首页 > Web前端 > JQuery

浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式

2014-11-19 17:59 796 查看

前言

　　因为项目中经常会有利用jquery操作dom元素的增删操作，所以会涉及到dom元素的绑定事件方式，简单的归纳一下bind,live,delegate,on的区别，以便以后查阅，也希望该文章日后能帮助到园友，文中如有不当之处，还望各位指正，话不多说，直接进入正题。

bind()

简要描述

　　bind()向匹配元素添加一个或多个事件处理器。

使用方式

　　$(selector).bind(event,data,function)

　　event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；

　　　　　　　　　　单事件处理：例如 $(selector).bind("click",data,function);

　　　　　　　　　　多事件处理：1.利用空格分隔多事件，例如 $(selector).bind("click dbclick mouseout",data,function);

　　　　　　　　　　　　　　　　2.利用大括号灵活定义多事件，例如 $(selector).bind({event1:function, event2:function, ...})　

　　　　　　　　　　　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

　　　　　　　　　　　　　　　　　大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　　　

　　data：可选；需要传递的参数；

　　function：必需；当绑定事件发生时，需要执行的函数；

举例说明

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery中四种方式给未来元素设置事件</title>
<style type="text/css">
.container
{
width: 300px;
height: 300px;
border: 1px #ccc solid;
background-color: Green;
}
.btn-test
{
border: 1px #ccc solid;
padding: 5px 15px;
cursor: pointer;
}
</style>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {

//利用bind()方法，给P标签设置click方法   ======失败 没有任何反应=======
$(".container p").bind("click", function () {
alert("bind()添加单击事件成功!");
});

//利用live()方法.给P标签设置click方法   =======成功调用方法============
$(".container p").live("click", function () {
alert("live()添加单击事件成功!");
});

//利用delegate()方法.给P标签设置click方法  =======成功调用方法============
$(".container").delegate("p", "click", function () {
//显示隐藏div
alert("delegate()添加单击事件成功!");
});

//利用on()方法.给P标签设置click方法  =======成功调用方法============
$(".container").on("click", "p", function () {
//显示隐藏div
alert("on()添加单击事件成功!");
});

//按钮添加P标签
$(".btn-test").click(function () {
$(".container").append("<p>这是新增的段落!</p>");
});
});
</script>
</head>
<body>
<input type="button" class="btn-test" value="添加元素" />
<div class="container">
</div>
</body>
</html>

View Code

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.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；[b]　[/b]

总结

　　

　　如果项目中引用jquery版本为低版本，推荐用delegate(),高版本jquery可以使用on()来代替，以上仅为个人看法，如有不同想法，欢迎拍砖交流。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航