jquery中绑定事件的异同

谈论jquery中bind(),live(),delegate(),on()绑定事件方式

1． Bind()

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

Event:必须项;添加到元素的一个或多个事件。

Data：可选;需要传递的参数

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

定义事件：

$(selector).bind({event1:function, event2:function, ...})；

2.live()

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

Event:必须项;添加到元素的一个或多个事件

Data:可选;需要传递的参数

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

定义事件：

$(selector).live({event1:function, event2:function, ...})　

3.delegate()

$(selector).delegate(childSelector,event,data,function)

childSelector:必须项;需要添加事件处理程序的元素，一般为selector的子元素;

event:必须项；添加到元素的一个或多个事件

Data:可选;需要传递的参数

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

定义事件：

$(selector).delegate(childselector,{event1:function, event2:function, ...})

4.on()

$(selector).on(event,childselector,data,function)

childSelector:必须项;需要添加事件处理程序的元素，一般为selector的子元素;

event:必须项；添加到元素的一个或多个事件

Data:可选;需要传递的参数

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

定义事件：

$(selector).on({event1:function, event2:function, ...},childselector);　

四种方式的异同和优缺点

相同点：

1.都支持单元多事件的绑定;空格相隔方式或者是大括号替代方式;

2.均是通过事件方式，将事件传递到document进行事件的响应;

比较：

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()差些。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 解决jQuery ajax动态新增节点无法触发点击事件的问题

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件. 解决jQuery ajax动态新增节点无法触发事件问题的两种解决方法,为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: <ul id="demo"> <li class

  • jQuery 复合选择器应用的几个例子

    <!-- 本文例子所引用的jQuery版本为 jQuery-1.8.3.min.js --> 一. 复合选择器对checkbox的相关操作 <input type="checkbox" id="ckb_1" /> <input type="checkbox" id="ckb_2" disabled="true" /> <input type="checkb

  • jQuery中复合属性选择器用法实例

    本文实例讲述了jQuery中复合属性选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配同时满足多个属性条件的元素. 语法结构: 复制代码 代码如下: [selector1][selector2][selectorN] 参数列表: 参数 描述 selector1 属性选择器. selector2 另一个属性选择器,用以进一步缩小范围. selectorN 任意多个属性选择器,也是用来缩小范围. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html&g

  • jQuery自定义元素右键点击事件(实现案例)

    大多数情况下我们使用左键来进行页面交互,而右键大部分对于开发者来说是审查元素的,有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性,常见的有漫画左键前进.右键后退. 第一步我们要屏蔽浏览器默认的右键点击行为,即阻止弹出框. 首先要将阻止弹出函数绑定到目标元素上: //阻止浏览器默认右键点击事件 $("div").bind("contextmenu", function(){ return false; }) 如此一来,div元素的右击事件就被屏蔽了,而浏览器其

  • jquery事件与绑定事件

    jquery事件与绑定事件

    1.首先,我们来看一下经常使用的添加事件的方式: <input type="button" id="btn" value="click me!" onclick="shao();" /> <script type="text/javascript"> function shao() { alert("msg is showing!"); } </script

  • jQuery简单绑定单个事件的方法示例

    本文实例讲述了jQuery简单绑定单个事件的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绑定单个事件</title> <script type="text/javascript" src="jquery-1.7.2.min.j

  • jquery移除、绑定、触发元素事件使用示例详解

    复制代码 代码如下: unbind(type [,data])     //data是要移除的函数$('#btn').unbind("click"); //移除click$('#btn').unbind(); //移除所有 对于只需要触发一次的,随后就要立即解除绑定的情况,用one() 复制代码 代码如下: $('#btn').one("click",function(){.......}); 触发操作trigger() 方法触发被选元素的指定事件类型. 复制代码

  • JQuery触发radio或checkbox的change事件

    早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层. 初始代码如下: 复制代码 代码如下: $(function(){ $("#ischange").change(function() { alert("checked"); }); }); 捣腾了半天,竟然一点反应都没有.百度了下,有高人指出上面几行代码在Firefox等浏览器中可以正常运行,即你选中复选框或取消复选框都会弹出一个对话框,但是在IE中却不会正常执行,即选中或取消复选框

  • jQuery复合事件用法示例

    jQuery复合事件用法示例

    本文实例讲述了jQuery复合事件用法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复合事件</title> <style type="text/css" > a{ color:#000; text-decoration:none; }

  • jQuery动态追加页面数据以及事件委托详解

    jQuery动态追加页面数据以及事件委托详解

    我们要执行的任务是页面起初有一部分图片,我们在底下有一个More Photos的链接,点击后,向当前页面后加载一部分图片,再点击该链接,继续加载,直到将我们列出的页面加载完成,此时该链接也消失了. 首先效果图如下: 这个只截取了最底下的一部分页面.在鼠标悬停在图片上时,还会有文字出现,鼠标移出时文字消失. 我们现在要做的就是点击底下的MorePhotos链接时,再加载一部分数据,然后再点击在加载一部分数据,直到数据加载完. 首先body中代码如下: <div id = "container

  • jQuery中绑定事件bind() on() live() one()的异同

    jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也移除) live()--------------------------版本号小于1.7(在Jquery1.7中已经移除,相应die()也移除) delegate()-------------------版本号小于1.7(在Jquery1.7中已经移除) on()------------------

  • JQuery 绑定select标签的onchange事件，弹出选择的值，并实现跳转、传参

    复制代码 代码如下: <script src="jquery.min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $('#mySelect').change(function(){ alert($

随机推荐