请问怎样给某样式的所有标签都添加一个事件？

比如
<span class="btn">test</span>
这样的标记有很多。怎样给所有的 class 为 btn 的标签添加 onclick 事件呢？又怎样在事件中区分是哪个标签引发的呢？难不能要循环一个个添加吗？以前在 ie 里面可以通过 .htc 文件实现，那么要实现各浏览器兼容，我该怎么做？谢谢！

解决方案 »

  1.   

    for(var obj = document.getElementsByTagName("*"), i = obj.length - 1; obj[i];)
       if(obj[i].className == 'btn') 
            obj[i].onclick = function(){
                  //     
            };
       
      

  2.   

    这个问题用Jquery比较简单 对浏览器兼容性较好
    $('.btn').bind('click',function(event){
       alert("我是单击事件");
       //又怎样在事件中区分是哪个标签引发的呢？------>这个只能靠这个event事件对象了
    })
      

  3.   


    Jquery 是怎么实现的这部分呢？您手边有它的代码吗？
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style>
    </style>
    <script>
    function abc()
    {
        var objs=document.getElementsByTagName("*");
        for(var i=0;i<objs.length;i++)
        {
            if(objs[i].className=="btn")
                objs[i].onclick=function(e){
                    var e=e||window.event;
                    obj=e.target||e.srcElement;
                    alert(obj.id);
                }
        }
    }
    </script>
    </head>
    <body onload=abc()>
    <div id="div1" class="btn">btn1</div>
    <span id="span1" class="btn">btn2</span>
    <div id="div2">学习<div id="div3" class="btn">btn3</div></div>
    <input type="button" id="button1" value="btn4" class="btn"/>
    </body>
    </html>
    兼容各主流浏览器。
      

  5.   

    肯定要循环的 ，就是jquery里的源码也是
    getElementsByTagName 等实现的 。
      

  6.   

    如果span都是放一起的,可以在父级上面注册一个事件,然后去获取是那个事件源,再处理,这样比每个注册不知道是不是好一点.
      

  7.   


    那就是说，.htc 给 class 加事件的方式是没有直接替代的方法了？
      

  8.   


    谢谢！不过很可惜，同样 class 的标签很难都在一起。
      

  9.   

    不放一起也没有关系,找到共同的祖先元素是一样的,不过这个时候适用于span比较多的时候,效率好一些(好像是某书说的)
      

  10.   


    嗯，我也是担心效率问题。
    但是如果在足显元素中设置 onclick 的话，那么这个祖先元素中的其他元素也使用 onclick 该怎么办？