多种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 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
javascript实现前端input密码输入强度验证
Jun 24 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
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 tp验证表单与自动填充函数代码
2012/02/22 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
javascript与webservice的通信实现代码
2010/12/25 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
浅谈python 线程池threadpool之实现
2017/11/17 Python
python mysql断开重连的实现方法
2019/07/26 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
单位未婚证明范本
2014/01/18 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
项目采购员岗位职责
2014/04/15 职场文书
毕业论文指导老师意见
2015/06/04 职场文书