jQuery的三种bind/One/Live/On事件绑定使用方法


Posted in Javascript onFebruary 23, 2017

本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧。需要的朋友参考下 

今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定。因为在此之前有bind(),
live(),

delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。

on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

替换bind()

当第二个参数'selector'为null时,on()和bind()其实在用法上基本上没有任何区别了,所以我们可以认为on()只是比bind()多了一个可选的'selector'参数,所以on()可以非常方便的换掉bind()

替换live()

在1.4之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以后添加的元素上面,当然在1.4之后delegate()也可以做类似的事情了。live()的原理很简单,它是通过document进行事件委派的,因此我们也可以使用on()通过将事件绑定到document来达到live()一样的效果。

 live()写法

$('#list li').live('click', '#list li', 
function() {
 //function code here.
});

on()写法

$(document).on('click', '#list li', 
function() {
 //function code 
here.
});

这里的关键就是第二个参数'selector'在起作用了。它是一个过滤器的作用,只有被选中元素的后代元素才会触发事件。

替换delegate()

delegate()是1.4引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和live()优点相似。只不过live()是通过document元素委派,而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。

delegate()的写法

$('#list').delegate('li', 'click', 
function() {
 //function code here.
});

on()写法

$('#list').on('click', 'li', function() 
{
 //function code here.
});

貌似第一个和第二个参数的顺序颠倒了一下,别的基本一样。

总结

jQuery推出on()的目的有2个,一是为了统一接口,二是为了提高性能,所以从现在开始用on()替换bind(),
live(),

delegate吧。尤其是不要再用live()了,因为它已经处于不推荐使用列表了,随时会被干掉。如果只绑定一次事件,那接着用one()吧,这个没有变化。

jQuery是 一款优秀的JavaScript框架,在旧版里主要用bind()方法,在新版里又多了两种One(),Live(),下面介绍这几种方法的使用:

1. bind/Unbind

在jquery的事件模型中,有两个基本的事件绑 定函数,bind与unbind,这两个函数的含义就是匹配页面元素进行相关事件的处理。比如我们在JS中经常使用到的 onfocus,onblur,onmouseover,onmousedown等事件都可以作为bind的参数进行传递。

$("#id").bind('click',function(){alert('tt!')});

其中bind的第一个参数代表的含义是:事件类型(注意不需要加on),function中的代码就是你要执行的逻辑 代码
多个事件绑定:bind还允许你绑定多个事件,事件名字之间用空格隔开,例如:

$('a').bind('click mouseover',function(){

在最新的jquery1.4版本中,对bind方法进行了改进,你可以在bind方法传入一个类JSON对象来一次绑定多 个事件处理函数。

$('a').bind({
click:function(){alert('a');},
mouseover:function(){alert('a again!')}

在function函数中,你还可以通过传递一个javaScript对 象给function方法,这个事件对象通常是可以省略的。
bind中还有一个参数data, 该参数一般情况下很少使用,通常为了解决在同一个方法中处理同一个变量时有很好的处理。

var productname="Sports Shoes";
$('#Area').bind('click',function(){
alert(productname);
});
productname="necklace",
$('#Area').bind('click',function(){
alert(productname);
});

由于变量productname被重新赋值,所以输出的消息都是”necklace”,这里不了解可以去查阅下关于JavaScript的变量作用域,要 解决这个问题就必须使用到data参数,

var productname="Sports Shoes";
$('#Area').bind('click',{pn:productname},function(){
alert(event.data.pn);
});
productname="necklace",
$('#Area').bind('click',{pn:productname},function(){
alert(event.data.pn);
});

2. One

为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。该方法与bind方法的参数一样,与bind方法的区别就是只对匹配元素的事 件处理执行一次,执行完之后,以后再也不会执行,当然重新发起web请求时它又会执行一次。

$('a').one('click',function(){
alert('a');
})

单击页面上的a元素后,弹出消息,除非用户发起第二次请求,否则再次点击a元素不会弹出消息对话框。

3. live

该方法主要是能处理动态添加的元素,给那些后添加的元素也一样绑定事件。

$('a').live('click,function(){
alert('show message!');
})

然后如果我添加一个元素,

$('body').appnend('Another Element');

那么该元素也会被触发事件处理函数alert。
另外,jQuery还提供了一些绑定这些标准事件类型的简单方式,比如.click()用于简化.bind(‘click')。

一共有以下这些事件名称:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 等。

下面看下jQuery中绑定事件bind() on() live() one()的异同

jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件

      bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也移除)

       live()--------------------------版本号小于1.7(在Jquery1.7中已经移除,相应die()也移除)

       delegate()-------------------版本号小于1.7(在Jquery1.7中已经移除)

       on()---------------------------版本号大于1.7(在Jquery1.7中添加,相应off()也添加)

A:bind()事件的用法

<title>绑定事件</title>
 <script src="js/jQuery1.11.1.js" type="text/javascript"></script>
 <script>
  $(function () {
   $("p").bind({
    "mouseover": function () {
     $("p").css("background-color", "red");
    },
    "mouseout": function () {
     $("p").css("background-color", "");
    }
   });
  });
 </script>
</head>
<body>
 <p>what are you doing?</p>
</body>
</html>

第一个最大的区别就是:bind()的事件绑定是只对当前页面选中的元素有效。如果你想对动态创建的元素bind()事件,是没有办法达到效果的。

在后面的动态生成DOM元素绑定事件就要使用on();

Javascript 相关文章推荐
js查找父节点的简单方法
Jun 28 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 #Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 #Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 #Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 #Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 #Javascript
jquery实现焦点轮播效果
Feb 23 #Javascript
SVG描边动画
Feb 23 #Javascript
You might like
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
js 深拷贝函数
2008/12/04 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
利用layer实现表单完美验证的方法
2019/09/26 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
Python AES加密模块用法分析
2017/05/22 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
Python3 log10()函数简单用法
2019/02/19 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
python计算无向图节点度的实例代码
2019/11/22 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
python dict乱码如何解决
2020/06/07 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
环保建议书500字
2014/05/14 职场文书
校园文明倡议书
2014/05/16 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
小学端午节活动总结
2015/02/11 职场文书
中秋节寄语2015
2015/03/24 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
《植树问题》教学反思
2016/03/03 职场文书
python实现简单倒计时功能
2021/04/21 Python