给node增添onclick事件，多个相同的node添加相同的事件。
日期：2014-05-16 浏览次数：20467 次
给node添加onclick事件，多个相同的node添加相同的事件。。。
请教：
给node添加onclick事件，多个相同的node添加相同的事件。只有为什么最后一个node的事件才生效？
------解决方案--------------------
很好你碰见了 js 种传说的 闭包问题
查阅主题 js闭包
------解决方案--------------------
请教：
给node添加onclick事件，多个相同的node添加相同的事件。只有为什么最后一个node的事件才生效？
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script language="javascript">
function appendTo(str,root){
root.innerHTML += str;
return root.childNodes[root.childNodes.length - 1];
}
window.onload = function(){
var tNode = document.getElementById("t");
for (i = 0; i <= 5; i++)
{
var str = "<div id = 'tt'>"+i+"</div>";
appendTo(str,tNode).onclick = function (){
alert(i);
}
}
}
</script>
<style type="text/css">
#tt{ width:20px; margin-top:5px; padding:5px; border: 1px solid #0000FF}
</style>
<body>
<div id="t"></div>
</body>
</html>
------解决方案--------------------
很好你碰见了 js 种传说的 闭包问题
查阅主题 js闭包
------解决方案--------------------
- JScript code
window.onload = function(){
var tNode = document.getElementById("t");
for (i = 0; i <= 5; i++)
{
var str = "<div id = 'tt'>"+i+"</div>";
appendTo(str,tNode).onclick = function (){
alert(i);
}
}
}
------解决方案--------------------
window.onload = function(){
var tNode = document.getElementById("t");
for (i = 0; i <= 5; i++){
var str = "<div class = 'tt'>"+i+"</div>";
appendTo(str,tNode);
}
//innerHTML方法会将已有的方法清除
//要么使用appendChild动态创建节点
//要么添加完元素后再统一增加事件
for (j = 0; j < tNode.childNodes.length; j++){
(function(k){
tNode.childNodes[k].onclick = function (){
alert(k);
}
})(j);
}
}
------解决方案--------------------
for循环中的appendTo(str,tNode)这个返回值只会记住最后一个的返回值，可以按照3楼的办法解决这个问题。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
