javascript循环绑定事件，只返回最后一个实例，解决办法

最新推荐文章于 2019-12-04 17:33:39 发布

tianxin_star

最新推荐文章于 2019-12-04 17:33:39 发布

阅读量842

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web 技术 js 文章标签： Javascript 闭包 javascript 闭包

本文链接：https://blog.youkuaiyun.com/tianxin_star/article/details/8560998

技术同时被 3 个专栏收录

8 篇文章

订阅专栏

web

2 篇文章

订阅专栏

1 篇文章

订阅专栏

本文通过五个不同的解决方案详细探讨了如何解决JavaScript中由于闭包导致的点击事件始终返回最后一个元素值的问题。通过实例代码展示了不同方法的具体实现。

例子：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>闭包演示</title>
<style type="text/css">
div {
	background: gray;
	margin:5px;
}
</style>
<script type="text/javascript">
	function init() {
		var list = document.getElementsByTagName("div");
		for ( var i = 0; i < list.length; i++) {
			var div = list[i];
			div.onclick = function() {
				alert(div.innerHTML);
			};

			 list[i].onmousemove = function() {    
            this.style.backgroundColor = "green";    
        }    
        list[i].onmouseout = function() {    
            this.style.backgroundColor = "gray";    
        }

}}</script></head><body onload="init();"><div>0</div><div>1</div><div>2</div><div>3</div><div>4</div></body></html>

每次都弹出最后一次的结果4。

解决方案1：

 function daili(element ) {    
        this.clickFunc = function() {    
       	 alert(" record" + element.innerHTML);    
        }    
    }    
function init(){
     var list = document.getElementsByTagName("div");  
    for (var i = 0; i < list.length; i++) {    
        list[i].onmousemove = function() {    
            this.style.backgroundColor = "green";    
        }    
        list[i].onmouseout = function() {    
            this.style.backgroundColor = "gray";    
        }    
        list[i].onclick = new daili(list[i]).clickFunc;    

    } 
}

解决方案2：

function init(){
     var list = document.getElementsByTagName("div");  
    for (var i = 0; i < list.length; i++) {    
        list[i].onmousemove = function() {    
            this.style.backgroundColor = "green";    
        }    
        list[i].onmouseout = function() {    
            this.style.backgroundColor = "gray";    
        }    
        var div = list[i];
	function(div){
		div.onclick = function(){
			alert(div.innerHTML);
		}
	}    

    } 
}

解决方案3：

function init(){
    var list = document.getElementsByTagName("div");  
    for (var i = 0; i < list.length; i++) {    
        list[i].onmousemove = function() {    
            this.style.backgroundColor = "green";    
        };   
        list[i].onmouseout = function() {    
            this.style.backgroundColor = "gray";    
        };  
     var div = list[i];
  	 // 匿名写法1	
	 (function(o){
		 o.onclick = function(){
	  			alert(o.innerHTML);
	  		};
	 })(div);

    } 
}

解决方案4：

function init(){
    var list = document.getElementsByTagName("div");  
    for (var i = 0; i < list.length; i++) {    
        list[i].onmousemove = function() {    
            this.style.backgroundColor = "green";    
        };   
        list[i].onmouseout = function() {    
            this.style.backgroundColor = "gray";    
        };  
  	 // 匿名写法	2
	 (function(o){
		 var o = list[i];
		 o.onclick = function(){
	  			alert(o.innerHTML);
	  		};
	 })();

    } 
}

方案5：

	function init() {
		var list = document.getElementsByTagName("div");
		for ( var i = 0; i < list.length; i++) {
			var div = list[i];
			div.onclick = function() {
				alert(this.innerHTML);
			};
			div.onmousemove = function() {    
		    	this.style.backgroundColor = "green";    
		    };  
		    div.onmouseout = function() {    
		    	this.style.backgroundColor = "gray";    
		    };    
		}
	}