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.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
js密码强度实时检测代码
Mar 02 Javascript
angular+webpack2实战例子
May 23 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
Angular父组件调用子组件的方法
Apr 02 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 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模板页面中分页代码的解析
2009/02/06 PHP
第六章 php目录与文件操作
2011/12/30 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
javascript基础知识讲解
2017/01/11 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
react实现antd线上主题动态切换功能
2019/08/12 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
wxPython的安装图文教程(Windows)
2017/12/28 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
行政总监岗位职责
2013/12/05 职场文书
社团招新策划书
2014/02/04 职场文书
数学检讨书1000字
2014/02/24 职场文书
行政助理工作职责范本
2014/03/04 职场文书
元旦联欢会感言
2014/03/04 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
军训新闻稿范文
2015/07/17 职场文书
听课评课活动心得体会
2016/01/15 职场文书