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 hover 延时器实现代码
Mar 12 Javascript
JS高级笔记
Jul 13 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
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调用C代码的实现方法
2014/03/11 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
JavaScript类和继承 constructor属性
2010/03/04 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
对python的文件内注释 help注释方法
2018/05/23 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
python实现猜数游戏
2020/03/27 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
python 生成器需注意的小问题
2020/09/29 Python
介绍一下mysql的日期和时间函数
2013/03/28 面试题
工作自我评价怎么写
2014/01/29 职场文书
如何写求职信
2014/05/24 职场文书
创先争优个人承诺书
2014/08/30 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
业余无线电通联Q语
2022/02/18 无线电