jsバインディングイベントの印刷インデックスの方法の整理
2161 ワード
よくある問題です.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>