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 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 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服务器实现多session并发运行
2006/10/09 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
javascript操作数组详解
2014/12/17 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
wxPython多个窗口的基本结构
2019/11/19 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
自我鉴定200字
2013/10/28 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
优秀教师获奖感言
2014/01/31 职场文书
开工仪式主持词
2014/03/20 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
SQL Server中锁的用法
2022/05/20 SQL Server