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正则表达式中参数g(全局)的作用
Nov 11 Javascript
js中的this关键字详解
Sep 25 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
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系列学习之日期函数使用介绍
2012/08/18 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
广告切换效果(缓动切换)
2009/05/27 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
Python查找相似单词的方法
2015/03/05 Python
Python批量按比例缩小图片脚本分享
2015/05/21 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
python实现求特征选择的信息增益
2018/12/18 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
python opencv实现证件照换底功能
2019/08/19 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
物流专业毕业生推荐信范文
2013/11/18 职场文书
接待员岗位责任制
2014/02/10 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
同事打架检讨书
2015/05/06 职场文书
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers