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 相关文章推荐
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
js编写简易的计算器
Jul 29 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
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
Python 获取当前所在目录的方法详解
2017/08/02 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
Python可以实现栈的结构吗
2020/05/27 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
初中音乐教学反思
2014/01/12 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
高校教师岗位职责
2014/03/18 职场文书
《忆江南》教学反思
2014/04/07 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
2014年度思想工作总结
2014/11/27 职场文书
党员倡议书
2015/01/19 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
运动会宣传稿50字
2015/07/23 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电