给node添加onclick事件，多个相同的node添加相同的事件。。。

本帖最后由 jp36389102 于 2012-08-06 20:51:12 编辑

解决方案 »

  1.   

    很好你碰见了 js 种传说的 闭包问题
    查阅主题 js闭包 
      

  2.   


    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);
            }
            
        }
    }
    这个地方用一个闭包保存一下iwindow.onload = function(){
        var tNode = document.getElementById("t");
        for (i = 0; i <= 5; i++)
            {
               (function(i){
                   var str = "<div id = 'tt'>"+i+"</div>";
                   appendTo(str,tNode).onclick = function (){
                   alert(i);
                   }            })(i);
        }
    }
      

  3.   

    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);
        }
    }
      

  4.   

    for循环中的appendTo(str,tNode)这个返回值只会记住最后一个的返回值，可以按照3楼的办法解决这个问题。
      

  5.   

    楼主的需求最好是给一个父节点添加一个onclick事件,然后下面的子节点都收到影响.
    这样添加onclick事件只用了一次,这样可以提高性能
    <!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);
            
        }

    // 父节点t添加onclick操作
    document.getElementById('t').onclick = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;

    // 不是<div>标签就返回
    if(target.nodeName !== 'DIV' || target === this) {
    return;
    }

    // 具体操作
    alert(target.innerHTML);

    // 阻止默认行为并取消冒泡
    // 阻止打开连接
    if(typeof e.preventDefault === 'function') {
    e.preventDefault();
    e.stopPropagation();
    }else {
    e.returnValue = false;
    e.cancelBubble = true;
    }
    }
    }</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>
      

  6.   

    感谢各位解答！在各位的指引下问题解决了。谢谢各位！！！<!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){
    var newNode = document.createElement("div");
    newNode.innerHTML = str;
    return root.appendChild(newNode.childNodes[0])
    }
    window.onload = function(){
        var tNode = document.getElementById("t");
        for (i = 0; i <= 5; i++){
    (function(i){
             var str = "<div id = 'tt'>"+i+"</div>";
             appendTo(str,tNode).onclick = function(){
    alert(i);
    };
    })(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>