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

 更新时间:2010年06月23日 11:20:44   作者:  
js绑定事件传参,javascript绑定事件传参数,jquery绑定事件传参数
复制代码 代码如下:

<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);
}

相关文章

  • 详解webpack解惑:require的五种用法

    详解webpack解惑:require的五种用法

    这篇文章主要介绍了详解webpack解惑:require的五种用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JavaScript代码执行的先后顺序问题

    JavaScript代码执行的先后顺序问题

    今天就给大家介绍一个特别基础的东西,javascript中函数的一点儿小知识之js代码的执行顺序问题,需要的朋友参考下吧
    2017-10-10
  • JavaScript表单焦点自动切换代码

    JavaScript表单焦点自动切换代码

    这篇文章主要介绍了JavaScript表单焦点自动切换代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • JavaScript 正在上传功能提示效果代码

    JavaScript 正在上传功能提示效果代码

    JavaScript实现正在上传功能提示代码,主要用于一些上传文件过程中的提示信息。
    2010-04-04
  • toString.call()通用的判断数据类型方法示例

    toString.call()通用的判断数据类型方法示例

    这篇文章主要给大家介绍了关于toString.call()通用的判断数据类型方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 解析JS在获取当前月的最后一天遇到的坑

    解析JS在获取当前月的最后一天遇到的坑

    这篇文章主要介绍了解析JS在获取当前月的最后一天遇到的坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • JavaScript的原型存在的安全问题及解决办法

    JavaScript的原型存在的安全问题及解决办法

    JavaScript的原型很多人都知道也很好用,但是很多人在使用原型继承中导致的安全问题却很少人知道,接下来我们就来好好了解一下,感兴趣的小伙伴跟着小编一起来看看吧
    2023-08-08
  • 简单实现js倒计时功能

    简单实现js倒计时功能

    这篇文章主要为大家详细介绍了js倒计时效果的实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • json格式数据的添加,删除及排序方法

    json格式数据的添加,删除及排序方法

    这篇文章主要介绍了json格式数据的添加,删除及排序方法,结合实例形式分析了针对一维数组与二维数组的json格式数据进行增加、删除与排序的实现技巧,需要的朋友可以参考下
    2016-01-01
  • iOS和Android用同一个二维码实现跳转下载链接的方法

    iOS和Android用同一个二维码实现跳转下载链接的方法

    这篇文章给大家分享的是iOS和Android扫描同一个二维码,分别跳到各自的下载链接的实现方法,文中给出了实例代码,有需要的朋友们可以参考借鉴。
    2016-09-09

最新评论