事件的循环绑定
全部代码：
<!DOCTYPE HTML">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>事件的循环绑定</title>
<style>
ul {
background: #ccc;
padding: 10px;
}
ul li {
margin: 15px;
background: #84cf39;
color: #fff;
list-style: none;
padding: 5px;
}
</style>
<script type="text/javascript">
var $ = function(elmID){
return document.getElementById(elmID);
}
window.onload = function(){
var listOne = $('listOne').getElementsByTagName('li');
var listTwo = $('listTwo').getElementsByTagName('li');
var resultCon = document.getElementsByTagName('div')[0].getElementsByTagName('span')[0];
function Fn(num){
this.fn = function(){
resultCon.innerHTML = 'listOne-' + num;
};
}
for (var i = 0; i < listOne.length; i++) {
var f = new Fn(i);
listOne[i].onclick = f.fn;
}
for (var i = 0; i < listTwo.length; i++) {
listTwo[i].onclick = function(){
var _i = i;
return function(){
resultCon.innerHTML = 'listTwo-' + _i;
}
}();
}
}
</script>
</head>
<body>
利用new来形成闭包做循环绑定
<ul id="listOne">
<li>
baby
</li>
<li>
honey
</li>
</ul>
利用匿名函数形成闭包
<ul id="listTwo">
<li>
baby
</li>
<li>
honey
</li>
</ul>
<div>
result:<span></span>
</div>
</body>
</html>
利用new对象的方法绑定：
function Fn(num){ this.fn = function(){ resultCon.innerHTML = 'listOne-' + num; }; } for (var i = 0; i < listOne.length; i++) { var f = new Fn(i); listOne[i].onclick = f.fn; }
利用闭包的方式绑定
for (var i = 0; i < listTwo.length; i++) {
listTwo[i].onclick = function(){
var _i = i;
return function(){
resultCon.innerHTML = 'listTwo-' + _i;
}
}();
}
