js和jquery批量绑定事件传参数一(新猪猪原创)


Posted in Javascript onJune 23, 2010
<input type="button" value="btn1" id="btn1"/> 
<input type="button" value="btn2" id="btn2"/> 
<input type="button" value="btn3" id="btn3"/> 
<script type="text/javascript"> 
for(var i=1;i<=3;i++){ 
document.getElementById('btn' + i).onclick = (function(j){ 
return function(){ 
alert(j); 
} 
})(i); 
} 
</script>

下面是结合了jquery的代码,原理都是一样的
在使用javascript批量绑定页面上的元素并传递递增编号时,需要如下编写:
<html>部分的代码:
<input type="button" id="btn1" value="按钮1" /> 
<input type="button" id="btn2" value="按钮2" /> 
<input type="button" id="btn3" value="按钮3" /> 
<input type="button" id="btn4" value="按钮4" /> 
<input type="button" id="btn5" value="按钮5" /> 
<input type="button" id="btn6" value="按钮6" /> 
<input type="button" id="btn7" value="按钮7" />

<js>部分的代码:
$(function () { 
var i; 
for (i = 1; i <= 7; i++) { 
$("#btn" + i).bind("click", { id: i }, dis); 
} 
}); function dis(evt) { 
alert(evt.data.id); 
}
Javascript 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
AngularJS入门教程之REST和定制服务详解
Aug 19 Javascript
深入研究React中setState源码
Nov 17 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 #Javascript
jquery ajax 同步异步的执行示例代码
Jun 23 #Javascript
jquery tab插件制作实现代码
Jun 22 #Javascript
jquery多浏览器捕捉回车事件代码
Jun 22 #Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 #Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 #Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 #Javascript
You might like
一个比较简单的PHP 分页分组类
2009/12/10 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
浅谈PHP的反射API
2017/02/26 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
javascript History对象原理解析
2020/02/17 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
Python科学计算环境推荐——Anaconda
2014/06/30 Python
python采集博客中上传的QQ截图文件
2014/07/18 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
python处理html转义字符的方法详解
2016/07/01 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
python实现排序算法解析
2018/09/08 Python
Python构建图像分类识别器的方法
2019/01/12 Python
python如何快速拼接字符串
2020/10/28 Python
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
德国网上花店:Valentins
2018/08/15 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
大学生毕业自我鉴定
2013/11/06 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
给上级领导的感谢信
2015/01/22 职场文书
个人思想政治总结
2015/03/05 职场文书
Python实现抖音热搜定时爬取功能
2022/03/16 Python