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 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
jquery.validate使用攻略 第二部
Jul 01 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
基于node.js之调试器详解
Aug 22 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
微信小程序登录换取token的教程
May 31 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
js实现图片跟随鼠标移动效果
Oct 16 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
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
json简单介绍
2008/06/10 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
python yield关键词案例测试
2019/10/15 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
老海军美国官网:Old Navy
2016/09/05 全球购物
体育教师工作总结的自我评价
2013/10/10 职场文书
传媒专业推荐信范文
2013/11/23 职场文书
高二生物教学反思
2014/01/27 职场文书
《我的第一本书》教学反思
2014/02/15 职场文书
担保书格式及范文
2014/04/01 职场文书
征兵宣传标语
2014/06/20 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
职称评定个人总结
2015/03/05 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技