jQuery中 bind的用法简单介绍


Posted in Javascript onFebruary 13, 2017

bind介绍

bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。

语法

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

event 必须。添加到元素的一个或多个事件如:click,mouseover,mouseup,change,select

data 可不填。传递到函数的额外数据,如:$(selector).bind(“click”,”input”,function(){});

function(){} 必填。绑定事件触发的函数

bind绑定多个函数

$("button").bind({ // 注意它的格式是 json
  click:function(){$("div").css("border","5px solid orange");},
  mouseover:function(){$("div").css("background-color","red");}, 
  mouseout:function(){$("div").css("background-color","#FFFFFF");} 
 });

4.bind绑定数据

// bind() 绑定 click 事件传 参数2 并且打印出 参数2
 $('button').bind('click',['路飞','索隆','乌索普'],function(event){
  alert(event.data[0]); // 路飞
 });

5.unbind bind事件移除

    html 代码 

<button>unbind()</button>
 <p>点我删除上边按钮的事件</p>

    js 代码 

// bind() 绑定多个点击事件
 $('button').click(function(){
  alert('我是第一个点击事件');
 });
 $('button').click(function(){
  alert('我是第二个点击事件');
 });
 $('button').bind('click',function(){
  alert('我是第三个点击事件');
 });
 // unbind() 删除点击事件
 $('p').bind('click',function(){
  $('button').unbind('click');
  alert('button 的点击事件被删除');
 });

以上所述是小编给大家介绍的jQuery中的 bind用法简单介绍,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery cdn使用介绍
May 08 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
jquery实现轮播图效果
Feb 13 #Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 #Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 #Javascript
简单实现js倒计时功能
Feb 13 #Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 #Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 #Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 #Javascript
You might like
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
五个PHP程序员工具
2008/05/26 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
养殖项目策划书范文
2014/01/13 职场文书
学习自我鉴定
2014/02/01 职场文书
质量提升方案
2014/06/16 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
公司证明怎么写
2014/09/22 职场文书
2015双创工作总结
2015/07/24 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书