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 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
JS 对象介绍
Jan 20 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
小程序如何构建骨架屏
May 29 Javascript
javascript对象3个属性特征
Nov 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代码检查代理ip的有效性
2016/08/19 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
Python中的高级函数map/reduce使用实例
2015/04/13 Python
Pycharm小白级简单使用教程
2020/01/08 Python
python实现感知机模型的示例
2020/09/30 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
移风易俗倡议书
2014/04/15 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
大学生实训报告总结
2014/11/05 职场文书
小学四年级学生评语
2014/12/26 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
MySQL数据库完全卸载的方法
2022/03/03 MySQL
Python实现自动玩连连看的脚本分享
2022/04/04 Python