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 相关文章推荐
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
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
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
php实现的二分查找算法示例
2017/06/20 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
Python pickle模块用法实例分析
2015/05/27 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
对python中return和print的一些理解
2017/08/18 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
python方向键控制上下左右代码
2018/01/20 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
Python argparse模块使用方法解析
2020/02/20 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
结婚典礼证婚词
2014/01/08 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
新年主持词
2014/03/27 职场文书
安全生产奖惩制度
2015/08/06 职场文书
python b站视频下载的五种版本
2021/05/27 Python
Python IO文件管理的具体使用
2022/03/20 Python