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 相关文章推荐
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
jquery 问答知识整理
2010/02/11 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
python re.match()用法相关示例
2021/01/27 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
介绍下Java中==和equals的区别
2013/09/01 面试题
2013年保送生自荐信格式
2013/11/20 职场文书
美发店5.1活动方案
2014/01/24 职场文书
项目安全员岗位职责
2015/02/15 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
甲午风云观后感
2015/06/02 职场文书
七年级英语教学反思
2016/02/15 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书