响应无序列表的点击事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style type="text/css">
* {
    margin:0;
    padding:0;
    font-size:12px;
    color:#000;
}#biaoge {
    width:405px;
    margin:50px auto;}
#biaoge li,#biaoge li.biaotou {
    list-style-type:none;
    width:100px;
    height:30px;
    line-height:30px;
    text-align:center;
    float:left;
    margin-left:1px;
    margin-bottom:1px;
    background:#ccc;
}
#biaoge li.biaotou {
    background:#999;
}</style>
<script language="javascript" type="text/javascript">
function $()
{
   var li=document.getElementById("biaoge").getElementsByTagName("li");
   for(var i=4;i<li.length;i++)
   {
     li[i].onclick=$2;
   }
}
function $2()
{
  alert(this.innerHTML);
}
</script>
</head><body onLoad="$()"><ul id="biaoge">
    <li class="biaotou">第一列</li>
    <li class="biaotou">第二列</li>
    <li class="biaotou">第三列</li>
    <li class="biaotou">第四列</li>
    <li >数据1-1</li>
    <li>数据1-2</li>
    <li>数据1-3</li>
    <li>数据1-4</li>
    <li>数据2-1</li>
    <li>数据2-2</li>
    <li>数据2-3</li>
    <li>数据2-4</li>
    <li>数据3-1</li>
    <li>数据3-2</li>
    <li>数据3-3</li>
    <li>数据3-4</li>
    <li>数据4-1</li>
    <li>数据4-2</li>
    <li>数据4-3</li>
    <li>数据4-4</li>
</ul></body>
</html>

解决方案 »

  1.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title></title>
    <style type="text/css">
    * {
        margin:0;
        padding:0;
        font-size:12px;
        color:#000;
    }#biaoge {
        width:405px;
        margin:50px auto;}
    #biaoge li,#biaoge li.biaotou {
        list-style-type:none;
        width:100px;
        height:30px;
        line-height:30px;
        text-align:center;
        float:left;
        margin-left:1px;
        margin-bottom:1px;
        background:#ccc;
    }
    #biaoge li.biaotou {
        background:#999;
    }</style>
    <script>
    function init(){
     if(document.all){
       document.body.onclick = function(){
          ev = event;
          if(ev.srcElement.tagName=="LI")alert(ev.srcElement.innerText);
       }
     }
     else{
       document.body.addEventListener("click",doclick,false);
     }
    }
    function doclick(ev){
    if(ev.target.tagName=="LI") alert(ev.target.innerHTML);
    }
    </script>
    </head><body onload="init();"><ul id="biaoge">
        <li class="biaotou">第一列</li>
        <li class="biaotou">第二列</li>
        <li class="biaotou">第三列</li>
        <li class="biaotou">第四列</li>
        <li>数据1-1</li>
        <li>数据1-2</li>
        <li>数据1-3</li>
        <li>数据1-4</li>
        <li>数据2-1</li>
        <li>数据2-2</li>
        <li>数据2-3</li>
        <li>数据2-4</li>
        <li>数据3-1</li>
        <li>数据3-2</li>
        <li>数据3-3</li>
        <li>数据3-4</li>
        <li>数据4-1</li>
        <li>数据4-2</li>
        <li>数据4-3</li>
        <li>数据4-4</li>
    </ul></body>
    </html>
      

  2.   

    2位都是对的,仔细看了有很多收获,适用性
    ie:attachEvent  document.all innerText srcElement
    ff:addEventListener target
    当然还有event和evt 
    貌似还有个nn浏览器,现在不知道处于什么状况.
    感叹下学习javascirpt,总感觉方法不对,不知道有没有合适的群组学习交流的.这贴我晚上来揭