众所周知，不带参数的绑定非常简单，只要使用（语法：“document.getElementById("对象ID名").attachEvent("事件名，如onchange",函数名);”）（示例：“document.getElementById("select_0").attachEvent("onchange",modifyFunction);”）即可。（注：以下只写示例）
带参数的绑定就要复杂一些：document.getElementById("select _0").attachEvent("onchange",function(){modifyFunction (obj,i););即在function()中写需要执行的函数即可。当然还有另一种写法：document.getElementById("select _0"). onchange=function(){modifyFunction (obj,i););。
绑定成功，OK。不过，慢，此时又遇到了第二个问题，传递过去的参数值都是同一个，并不是想象中的将i的值传递过去后，每个绑定的函数的参数值都不一样。
于是乎，上网百度。经过艰难的搜索测试，期间还找到一个如下所示的例子：
复制代码 代码如下:
<script>
document.onclick=check;
function check() {
if(event.srcElement.type== "button ")
alert(event.srcElement.name);
}
</script>
<input type=button name=button1>
<input type=button name=button2>
此例子是通过event找到有动作的组件，然后获取它的源，再取出name值。这样就可以通过传入的obj，获得是第几个obj，然后进行相应的操作。
只是还有个问题，经过这种操作之后，obj的值又出现了问题，不管操作哪个select，获得的值都是最后一个。
继续百度。
终于，在一篇文章中获得了原因。文章转帖如下：
我们先看一个关于Javascript利用循环绑定事件的例子：
例如：一个不确定长度的列表，在鼠标经过某一条的时候改变背景。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<ul id="list">
<li>第1条记录</li>
<li>第2条记录</li>
<li>第3条记录</li>
<li>第4条记录</li>
<li>第5条记录</li>
<li>第6条记录</li>
</ul>
<script type="text/javascript">
var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组
for (var i = 0; i <= list_obj.length; i++) {
list_obj[i].onmousemove = function() {
this.style.backgroundColor = "#cdcdcd";
}
list_obj[i].onmouseout = function() {
this.style.backgroundColor = "#FFFFFF";
}
}
</script>
</body>
</html>
这个例子循环为一组对象绑定事件处理函数。
但是，如果我们在这个基础上增加一些需求。比如在点击某一条记录的时候弹出这是第几条记录？
肯能你会理所当然的这么写：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<ul id="list">
<li>第1条记录</li>
<li>第2条记录</li>
<li>第3条记录</li>
<li>第4条记录</li>
<li>第5条记录</li>
<li>第6条记录</li>
</ul>
<script type="text/javascript">
var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组
for (var i = 0; i <= list_obj.length; i++) {
list_obj[i].onmousemove = function() {
this.style.backgroundColor = "#cdcdcd";
}
list_obj[i].onmouseout = function() {
this.style.backgroundColor = "#FFFFFF";
}
list_obj[i].onclick = function() {
alert("这是第" + i + "记录");
}
}
</script>
</body>
</html>
测试一下你会发现alert出来的都是：这是第6记录
其实这里for循环已将整个列表循环了一遍，并执行了i++，所以这里i变成了6，
有什么好的办法解决这个问题吗？
那就是闭包了，个人认为闭包是js中最难捉摸的地方之一，
看看什么是闭包：
闭包时是指内层的函数可以引用存在与包围他的函数内的变量，即使外层的函数的执行已经终止。
这个例子中我们可以这样做：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<ul id="list">
<li>第1条记录</li>
<li>第2条记录</li>
<li>第3条记录</li>
<li>第4条记录</li>
<li>第5条记录</li>
<li>第6条记录</li>
</ul>
<script type="text/javascript">
function tt(nob) {
this.clickFunc = function() {
alert("这是第" + (nob + 1) + "记录");
}
}
var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组
for (var i = 0; i <= list_obj.length; i++) {
list_obj[i].onmousemove = function() {
this.style.backgroundColor = "#cdcdcd";
}
list_obj[i].onmouseout = function() {
this.style.backgroundColor = "#FFFFFF";
}
var col = new tt(i);
list_obj[i].onclick = col.clickFunc;
}
</script>
</body>
</html>
PS：闭包很难，很复杂！
经过以上文章可以得知，引起这个问题的原因其实是因为js的闭包难题。按照面向对象的JAVA语言的理解可以解释为：js循环动态绑定带参数函数中的参数，其实相当于java中的引用传递，而非值传递。传递进来的引用只相当于一个指针，指向的是一个内存地址，这个内存地址存放的才是具体的值，而外面的循环会不断的修改这个存放地址中的值，所以最后循环结束之后，参数的值只能找到最后一个。
知道了原因就很好解决了。New一个新的“函数类”（姑且这么称呼吧）。测试OK。一下是修改后的代码：
代码如下:
//在新增按钮上绑定函数
document.getElementById("add").attachEvent("onclick",addFunction);
var jc_count = 0;//定义需要改变第几行的值
function txzmcFunction(x,y){//下拉框中绑定的函数
var sql="select txzjc from dm_txzmc where dm='"+x.value+"'";//取得下拉框中的代码，通过ajax获得相应的中文名称
jc_count = y;//定义当前行是第几行
ajaxSelect(sql,"txzjcFunction");//封装的ajax函数
}
function txzjcFunction(x){//接收封装的ajax函数返回值，并赋值
document.getElementById("_subarea_hxax_clzjxxb_hxax_txzxxb_update_txzjc_"+jc_count).value=x;
}
function bb(dx,sz){//解决动态绑定闭包问题要用到函数
this.clickFunc=function(){
txzmcFunction(dx,sz);//调用相应的函数
}
}
function addFunction(){ //动态循环绑定
var count=document.getElementById("_subarea_hxax_clzjxxb_hxax_txzxxb_update_maxcount").value;//获取最大的行数
for (var i=0;i<count ;i++ )//循环绑定
{
var obj=document.getElementById("_subarea_hxax_clzjxxb_hxax_txzxxb_update_txzmc_" +i);
var tp = new bb(obj,i);//解决闭包问题，new一个新的函数类
obj.onchange = tp.clickFunc;
}
}
//显示页面时执行一次
addFunction();
refurl:http://www.jb51.net/article/25268.htm
相关推荐
在Angular4中，我们可以通过模板绑定的方式来监听这个事件。如下是一个简单的例子： ```html (change)="onSelectChange($event)"> 选项1 选项2 <!-- 其他选项 --> ``` 在对应的TypeScript组件文件中，我们可以...
此外，还需要在文档加载完毕后，使用$(document).ready()和$(window).load()方法来确保imgAreaSelect插件被正确初始化，并且在图片加载完成后，绑定onSelectChange事件来调用preview函数。 imgAreaSelect插件还具有...
1. **数据绑定**：`dhtmlxGrid`可以与各种数据源进行绑定，包括XML、JSON、CSV等格式，也可以直接绑定到数据库。 2. **编辑模式**：支持单元格、行、列等多种编辑模式，允许用户对数据进行实时修改。 3. **排序与...
3. 监听事件：`imgareaselect`插件提供了多种事件，如`onSelectStart`、`onSelectChange`和`onSelectEnd`，你可以根据需求绑定这些事件，获取选区的实时信息或者执行相应的操作。 4. 处理选区信息：当用户完成选取...
- **事件监听（Event Handling）**：通过attachEvent()方法注册事件监听器，如onSelectChange()、onNodeClick()等。 - **操作节点（Node Operations）**：提供了一系列API，如appendChild()、removeNode()、...
`onchange`事件被绑定到每个下拉列表，当用户选择一个选项时，会触发对应的JavaScript函数`onSelectChange`。 `onSelectChange`函数的主要工作是根据用户当前选择的值（比如省份）发送Ajax请求到服务器，请求新的...
接下来，我们可以在HTML中创建一个`<img>`标签，并为其绑定imgareaselect插件。通过使用jQuery选择器，我们可以初始化插件并设置相关参数： ```html ``` ```javascript $(document).ready(function() { $('#...
dhtmlxTree提供了丰富的事件，如`onSelectChange`（节点选中变化）、`onOpen`（节点打开）和`onClick`（节点点击）。通过使用`attachEvent`方法，可以绑定自定义的处理函数来响应这些事件。 6. **自定义样式和行为...
3. **灵活性**：该插件提供了丰富的事件回调，如onSelectStart、onSelectChange和onSelectEnd等，开发者可以据此实现选区变化时的实时响应，如预览、保存等操作。 4. **可扩展性**："imgareaselect"的基础功能虽然...
3. 监听事件：通过绑定插件提供的事件，如`onSelectChange`，可以获取选区变化的信息，进行后续处理。 四、实际应用示例 在电商网站上，用户可能需要上传产品图片并进行裁剪以确保显示效果；在教育平台，教师可以...
- `instance`：获取 imgAreaSelect 绑定的 image 对象实例。 - `keys`：启用或禁用键盘支持。 - `maxHeight`, `maxWidth`, `minHeight`, `minWidth`：设定选区尺寸的限制。 - `movable`：允许选区移动。 - `parent`...
- `instance`: 返回绑定到图片的插件实例，以便使用API方法。 - `maxHeight` / `maxWidth`: 设置选取的最大尺寸。 - `minHeight` / `minWidth`: 设置选取的最小尺寸。 - `movable`: 是否允许选择区域移动，默认为`...