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 相关文章推荐
固定背景实现的背景滚动特效示例分享
May 19 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 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判断邮箱地址是否存在的方法
2016/02/13 PHP
php格式化json函数示例代码
2016/05/12 PHP
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
对PyTorch torch.stack的实例讲解
2018/07/30 Python
浅析Python函数式编程
2018/10/06 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
python3多线程知识点总结
2019/09/26 Python
Pytorch to(device)用法
2020/01/08 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
python Scrapy框架原理解析
2021/01/04 Python
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
final, finally, finalize的区别
2012/03/01 面试题
平面设计的岗位职责
2013/11/08 职场文书
初婚未育证明
2014/01/15 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
党小组评议意见
2015/06/02 职场文书
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记