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

复制代码 代码如下:

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

时间: 2024-11-02 14:42:49

js和jquery批量绑定事件传参数一(新猪猪原创)_javascript技巧的相关文章

JS函数arguments数组获得实际传参数个数的实现方法_javascript技巧

JS与PHP在函数传参方面有点不同,PHP形参与实参个数要匹配,而JS就灵活多了,可以随意传参,实参比形参少或多都不会报错. 实参比形参多不会报错 function say(a){ alert(a); } say('琼台博客','WEB技术博客'); 执行结果 我们再来看看形参比实参多的结果 function say(a,b){ alert('a 的值是 '+a+'\nb 的值是 '+b); } say('琼台博客'); 执行结果 a 对应第一个实参"琼台博客",b 没有对应的实参所以

js鼠标单击和双击事件冲突问题的快速解决方法_javascript技巧

情况一 如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件,当在这个DOM对象上发生双击事件时,第一次点击(click)会 触发一次单击(click)事件,第二次点击(连续的)也会触发双击(dblclick)事件,还是会触发单击(click)事件(IE7与 firefox). 解决方法: <button onclick="test(1)" ondblclick="test(2)"></button> <scr

js阻止冒泡和默认事件(默认行为)详解_javascript技巧

本文实例为大家分享了js阻止冒泡和默认事件方法,供大家参考,具体内容如下 阻止冒泡.冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了.下面的domo就是很好的例子. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

js中关于new Object时传参的一些细节分析_javascript技巧

1, 参数是一个对象,核心js对象(native ECMAScript object)或宿主对象(host object),那么将直接返回该对象. 其生成的对象构造器仍然是所传参数对象的构造器.这样造成的后果是虽然该对象是new Object,但其constructor不一定是Object. 复制代码 代码如下: function Person(){this.name='jack';} var w = new Object(window), d = new Object(document), p

JS和Jquery获取和修改label的值的示例代码_javascript技巧

获取值: label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 复制代码 代码如下: var label=document.getElementById("id"); var value=label.value; var value=$("#id").val(); 可以这样: JS: 复制代码 代码如下: var label=document.getElementById("id"); var value=label

原生js和jQuery随意改变div属性style的名称和值_javascript技巧

一些简单的例子,用原生js和jQuery实现随意改变div属性,和重置.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>函数传参,改变Div任意属性的值</title> <style type="text/css"> body,p{margin:0;padding:0;} body{color:#3

js给onclick赋值传参数的两种方法_javascript技巧

1)当方法没有参数时,赋值可以直接用onclick = 方法名 复制代码 代码如下:   window.onload = function() {        $('btnTest').onclick = test;     }  function test() {        alert(val);  } 2)当方法有参数时,用onclick = 方法名(参数)时就有错了,需要在方法名前面加function() 复制代码 代码如下:   window.onload = function()

js绑定事件this指向发生改变的问题解决方法_javascript技巧

可对函数进行如下扩展 复制代码 代码如下: Function.prototype.bind = function(obj) { var _this = this; return function() { _this.apply(obj,arguments); } } 用法如下 复制代码 代码如下: var a = function(){ alert(this.title) }.bind(document); a(); 常用在这儿 复制代码 代码如下: function myalert() { t

关于javaScript注册click事件传递参数的不成功问题_javascript技巧

最近这半年作为一个java 程序员,我写的javaScript代码都快比java代码多了,前段时间是给某银行做一个柜员管控系统,在柜员授权这一块功能上,由于柜员的授权需要考虑各方面的因素,比如机构权限.柜员类型权限.岗位权限,业务权限等等,并且要对这些权限要做多次的交集或者并集处理,页面上不得不用许多的javascript来进行控制.造成了这一功能模块的实现上javaScript代码比java代码负责的情况. 而现在又要给某银行开发一个保管箱管理系统,其核心功能块保管箱座管理以及保管箱管理,为实