87,997
社区成员




<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
function newelement(){
for(var i=1;i<4;i++){
var a=document.createElement("a");
a.innerHTML="aaa"+i;
a.onclick=function(){alert('第'+i + '个链接');};
var img=new Image();
img.src="http://img.baidu.com/img/post-jg.gif";
img.style.border="none";
a.appendChild(img)
document.getElementById("oData"+i).appendChild(a);
img.onmouseover=function(){
this.src="http://www.baidu.com/img/sslm1_logo.gif";
}
img.onmouseout=function(){
this.src="http://img.baidu.com/img/post-jg.gif";
}
}
}
</script>
</HEAD>
<BODY onload=newelement()>
<SPAN ID="oData1" ></SPAN>
<SPAN ID="oData2" ></SPAN>
<SPAN ID="oData3" ></SPAN>
</BODY>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
1. 函数定义时的作用域链到函数执行时依然有效
2. 函数只有调用时才会执行,定义时里面的代码是不会执行的。
-->
<input type="button" name="btn" value="button1"> <br>
<input type="button" name="btn" value="button2"> <br>
<input type="button" name="btn" value="button3"> <br>
<script>
var btns = document.getElementsByName( "btn" );
for ( var i = 0; i < btns.length; i++ ) {
btns[ i ].onclick = function () {
console.info( "click button------ " + i );
}
}
// 把for循环的每次循环的执行一一列出,会更加容易理解一些。
/* ==>
( function () {
var i = 0;
btns[ i ].onclick = function () {
console.info( "click button------ " + i );
}
var i = 1;
btns[ i ].onclick = function () {
console.info( "click button------ " + i );
}
var i = 2;
btns[ i ].onclick = function () {
console.info( "click button------ " + i );
}
var i = 3;
btns[ 0 ].click(); // 调用时,i = 3
btns[ 1 ].click();
btns[ 2 ].click();
} ) ();
*/
</script>
<hr>
<!--
我以前也遇到过上面的疑惑,我就额外定义了一个局部变量 index 来临时存储 for中变量i ;
感觉能解决,但最后发现不行,原因就是忽略了函数在调用时才会执行,
而调用是通过事件来触发的。
-->
<input type="button" name="btn2" value="button1"> <br>
<input type="button" name="btn2" value="button2"> <br>
<input type="button" name="btn2" value="button3"> <br>
<script>
var btn2s = document.getElementsByName( "btn2" );
for ( var i = 0; i < btn2s.length; i++ ) {
var index = i;
btn2s[ i ].onclick = function () {
console.info( "click button2------ " + index );
}
}
/* ==>
( function () {
var i = 0;
var index = i;
btn2s[ i ].onclick = function () {
console.info( "click button2------ " + index );
}
var i = 1;
var index = i;
btn2s[ i ].onclick = function () {
console.info( "click button2------ " + index );
}
var i = 2;
var index = i;
btn2s[ i ].onclick = function () {
console.info( "click button2------ " + index );
}
var i = 3;
} ) ();
*/
</script>
<hr>
<!--
通过闭包能解决这个问题。
-->
<a href="#" name="link"> link1 </a> <br>
<a href="#" name="link"> link2 </a> <br>
<a href="#" name="link"> link3 </a> <br>
<script>
var links = document.getElementsByName( "link" );
for ( var i = 0; i < links.length; i++ ) {
( function ( index ) {
links[ i ].onclick = function () {
console.info( "click link------ " + index );
}
} ) ( i );
}
/* ==>
( function () {
var i = 0;
( function ( index ) {
links[ i ].onclick = function () {
console.info( "click link------ " + index );
}
} ) ( i );
var i = 1;
( function ( index ) {
links[ i ].onclick = function () {
console.info( "click link------ " + index );
}
} ) ( i );
var i = 2;
( function ( index ) {
links[ i ].onclick = function () {
console.info( "click link------ " + index );
}
} ) ( i );
var i = 3;
links[ 0 ].click();
links[ 1 ].click();
links[ 2 ].click();
} ) ();
*/
</script>
</body>
</html>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
function newelement(){
for(var i=1;i<4;i++)(function(i){
var a=document.createElement("a");
a.innerHTML="aaa"+i;
a.onclick=function(){alert('第'+i + '个链接');};
var img=new Image();
img.src="http://img.baidu.com/img/post-jg.gif";
img.style.border="none";
a.appendChild(img)
document.getElementById("oData"+i).appendChild(a);
img.onmouseover=function(){
this.src="http://www.baidu.com/img/sslm1_logo.gif";
}
img.onmouseout=function(){
this.src="http://img.baidu.com/img/post-jg.gif";
}
})(i);
}
</script>
</HEAD>
<BODY onload=newelement()>
<SPAN ID="oData1" ></SPAN>
<SPAN ID="oData2" ></SPAN>
<SPAN ID="oData3" ></SPAN>
</BODY>