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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
js实现html滑动图片拼图验证
Jun 24 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 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中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
PHP基础知识介绍
2013/09/17 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
PHP图片加水印实现方法
2016/05/06 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
js 文件引入实现代码
2010/04/23 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
浅谈js的异步执行
2016/10/18 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
Python实现拼接多张图片的方法
2014/12/01 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
python编程嵌套函数实例代码
2018/02/11 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
构造方法和其他方法的区别
2016/04/26 面试题
写好自荐信的要点
2013/11/06 职场文书
大学生如何写自荐信
2014/01/08 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL