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控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
jquery实现图片切换代码
Oct 13 Javascript
详解jQuery选择器
Dec 21 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 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 编程安全性小结
2010/01/08 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
python pdb调试方法分享
2014/01/21 Python
简单的Python2.7编程初学经验总结
2015/04/01 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
学生信息管理系统python版
2018/10/17 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
给老婆的保证书
2015/01/16 职场文书
催款函范文
2015/06/24 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript