多种jQuery绑定事件的实现方式


Posted in Javascript onJune 13, 2016

最近发现jQuery一个对象的事件可以重复绑定多次,当事件触发的时候会引起代码多遍执行。

下面是一个click事件被重复绑定的示例:

function reg_button_click(){
 $("#button).click(function(){
 alert("button click");
 });
}
$(document).ready(function(){
 #重复注册3次
 reg_button_click();
 reg_button_click();
 reg_button_click();
 #触发的时候 出现3个alert
 $('#button').click();
});

下面给出解决方法:

对于需要重复绑定的场景,再事件注册时候考虑用先unbind 再bind的方法;或者先off 再on

function reg_button_click(){
 $("#button).unbind('click').bind('click',(function(){
 alert("button click");
 });
}
$(document).ready(function(){
 #重复注册3次
 reg_button_click();
 reg_button_click();
 reg_button_click();
 #触发的时候 出现3个alert
 $('#button').click();
});

那jQuery绑定事件的实现方式有哪些,下面就为大家分享jQuery绑定事件的方法,供大家参考,具体内容如下

<html>

<head>

<meta charset="utf-8" />

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><!--百度CDN-->

</head>

 

<body>

<input type="text"/>

<input type="button" value="button1"/>

<script>

$(function(){

 var text = $(":text");

 var button = $(":button");

 //调试器记录日志 console.log("message"); 如:火狐浏览器,打开FireBug(按F12)

 

 //触发单个事件:两种方式

 button.bind("mouseover",function(){

 console.log("移入");

 });

 button.bind({

 "mouseout": function(){

  console.log("移出");

 }

 });

 //多个事件:三个方式

 text.bind("dblclick blur",function(){

 console.log("双击或者失去焦点");

 });

 

 text.bind({

 "dblclick blur":function(){

  console.log("双击或者失去焦点");

 }

 });

 text.bind({

 "dblclick":function(){

  console.log("双击");

 },

 blur:function(){

  console.log("失去焦点");

 }

 });

 

 //取消事件

 text.unbind("dblclick"); //取消单个事件

 //text.unbind("dblclick blur"); //取消多个事件

 //text.unbind(); //取消全部事件

});

 

</script>

</body>

</html>

以上就是本文的全部内容,希望对大家学习jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 Javascript
JS Ajax请求如何防止重复提交
Jun 13 #Javascript
JavaScript判断微信浏览器实例代码
Jun 13 #Javascript
JavaScript判断是否是微信浏览器
Jun 13 #Javascript
JavaScript_object基础入门(必看篇)
Jun 13 #Javascript
js 连续赋值的简单实现
Jun 13 #Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 #Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 #Javascript
You might like
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
PHP 断点续传实例详解
2017/11/11 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
JS target与currentTarget区别说明
2011/08/28 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
python处理PHP数组文本文件实例
2014/09/18 Python
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
名片管理系统python版
2018/01/11 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
python实现翻译word表格小程序
2020/02/27 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
旷课检讨书1000字
2014/02/14 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
 python中的元类metaclass详情
2022/05/30 Python