很常见的问题，dom对象绑定事件打印索引。
<html >
<body>
<p>111</p>
<p>222</p>
<p>333</p>
<p>444</p>
<p>555</p>
</body>
</html>
<script type="text/javascript">
var p = document.getElementsByTagName("p");
var len = p.length;
function fn1(){
for(var i=0; i<len; i++){
p[i].setAttribute("x",i+1);
p[i].onclick = function(){
alert(this.getAttribute("x"));
};
}
}
//fn1();
function fn2(){
for(var i=0; i<len; i++){
p[i].onclick = function(){
alert(arguments.callee.x);
}
p[i].onclick.x = i+1;
//or
/*
(p[i].onclick = function(){
alert(arguments.call.x);
}).x = i+1;
*/
}
}
//fn2();
// ----------------- 以上是保存变量在对象中。
function fn3(){
for(var i=0; i<len; i++){
p[i].onclick = (function(x){
var y = i+1;
return function(){ //返回一个闭包，引用了来自外层的变量
alert(x); // 参数形式
alert(y); // 变量形式,外层函数执行可以不带参数.
};
})(i+1);
}
}
//fn3();
function fn4(){
for(var i=0; i<len; i++){
(function(x){ //利用自执行的匿名函数激发作用域。体会和fn3的区别。
var y = i+1; //fn3和fn4同样是闭包，不过fn3是在函数外引用闭包，fn4是在函数内引用闭包。
p[i].onclick = function(){
alert(x);
alert(y);
}
})(i+1);
}
}
//fn4();
// ----------------------以上变量保存在闭包中
function fn5(){
for(var i=0; i<len; i++){
var str = "alert("+(i+1)+")"; //利用new Function声明函数。
p[i].onclick = new Function(str); //这种方法相当于对每一个p[i]单独声明了一个构造好的函数.
}
}
fn5();
//总结
/*
fn5的效率无疑是最差的，因为new Function的问题，所以不建议使用。
fn3,fn4利用闭包的特性，分别在内存中持久了每一个i的变量。这里可以帮助理解闭包的作用。
fn1,fn2将变量保存在对象上，效率最高，对于大量的绑定建议使用。
*/
</script>
分享到：
相关推荐
js绑定事件，并动态传参，比如绑定click事件。js绑定事件，并动态传参，比如绑定click事件。 js绑定事件，并动态传参，比如绑定click事件
在实际操作中，我们可以通过编写一段JavaScript代码来实现动态绑定事件。先通过jQuery选取需要添加事件监听的元素，然后使用.on()方法绑定事件。对于动态添加的元素，我们同样可以使用.on()方法进行事件委托，将事件...
事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例...
在 Delphi 编程环境中，动态绑定事件处理函数是一个强大的特性，它允许程序在运行时动态地连接事件和对应的处理函数，而不是在编译时静态地确定。这为开发提供了更大的灵活性，特别是在处理不确定数量的对象或者需要...
JavaScript 为 DOM 绑定事件兼容 JavaScript 为 DOM 绑定事件是指在网页中将事件处理程序绑定到 HTML 元素上的过程，而为了实现跨浏览器兼容性，我们需要了解不同的浏览器对绑定事件的实现方式。 直接为 Element ...
使用$event传递参数(事件本身) <input v-model="checknames" @change="changecheckbox(item,$event)" style="float: right" type=...以上这篇vue绑定事件后获取绑定事件中的this方法就是小编分享给大家的全部内容了
js 判断是否绑定一个事件
"js单击事件和双击事件并存绑定"这个主题涉及到如何让一个元素同时响应单击（click）和双击（dblclick）事件，而不互相冲突。这在实现某些交互功能时非常有用，比如，单击可能打开一个菜单，而双击则可能编辑内容。...
本篇内容将深入探讨如何使用JavaScript实现这一功能，并且介绍如何在事件处理函数中绑定不同的参数值。 首先，我们要知道如何获取页面中的li节点。JavaScript提供了多种方法来选取页面中的元素，其中`...
### JavaScript 循环给 li 绑定事件实现点击 li 弹出其索引值和内容的方法 在前端开发中，经常需要对 DOM 元素进行操作，比如为多个元素添加事件监听器。本文将详细介绍如何使用原生 JavaScript 和 jQuery 来实现...
web前端的朋友们,经常会遇到给由后台返回的数据遍历生成的DOM绑定事件,但是总是绑定不上,那是因为把事件直接绑定到了动态生成的DOM上了,正确的方式是利用事件冒泡给其父元素绑定，这样才能解决问题的哦！
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）环境中使用纯MVVM（Model-View-ViewModel）模式...无论是简单的按键事件还是复杂的用户交互，这种事件绑定方法都能提供强大的灵活性和控制力。
在这个"ASP.NET-008—JS绑定控件事件"的主题中，我们将深入探讨如何在ASP.NET环境中利用JavaScript（JS）来绑定和处理控件的事件。JavaScript是一种广泛使用的客户端脚本语言，它可以在用户的浏览器上运行，提供交互...
本文实例讲述了JavaScript给按钮绑定点击事件（onclick）的方法。分享给大家供大家参考。具体分析如下： 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head>...
具体到代码实现，可以使用jQuery的on方法为table的tr元素绑定双击事件。当用户双击某一行时，会触发事件函数，此函数中可以获取到当前行的索引，即Index。然后通过这个索引，可以从数据集中获取到相应的行数据。 一...
总的来说，通过本文的学习，我们了解了Jquery为单选框checkbox绑定单击事件的方法和最佳实践，这些知识点对于进行前端开发的工程师来说非常实用。在实际开发过程中，灵活运用这些方法可以有效地增强网页的交互性和...
两种方式：直接给对象添加事件,节点添加事件 例如给一个id为tab1的添加onclick事件 第一种情况： 代码如下: var t = document.getElementById(“tab1”); t.onclick = function tst(){ alert(”); } 第二种...
在JavaScript中，监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一：适用于IE浏览器，仅在关闭时提示 ```javascript window....
本主题将深入探讨WPF中的数据绑定、命令绑定以及事件绑定，同时讲解View与ViewModel之间的通信，以展示MVVM模式的核心原理和实践。 ### 数据绑定 数据绑定是WPF中一个强大的特性，允许UI元素（View）直接与数据源...
**jQuery绑定事件**是JavaScript库jQuery中的核心功能之一，它极大地简化了DOM元素事件处理的流程，使得开发者能够更加高效地编写代码。在JavaScript原生语法中，为元素添加事件监听器通常涉及到`addEventListener`...