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 相关文章推荐
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
js中常用的Math方法总结
Jan 12 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 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程序的国际化实现方法(利用gettext)
2011/08/14 PHP
PHP 图片上传代码
2011/09/13 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
Web程序工作原理详解
2014/12/25 PHP
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
python 调用有道api接口的方法
2019/01/03 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
销售代表求职自荐信
2013/10/01 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
酒店开业主持词
2015/07/02 职场文书
小学班级口号大全
2015/12/25 职场文书