Javascript(jQuery)中绑定页面上所有按钮点击事件的几种方式

方法一：使用document对象查找所有的按钮
[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
//按照dom的方式添加事件处理  
        function BindByDom() {  
            try{  
                var htmlBtns = document.getElementsByTagName('button');//获取HTMLCollection对象集合  
                //遍历集合，一个一个地设置点击事件  
                for (var i = 0; i < htmlBtns.length; ++i) {  
                    htmlBtns[i].onclick = function () {  
                        var uid = this.getAttribute('uid');  
                        alert("点击了按钮，uid = " + uid);  
                    };  
                }  
            }  
            catch (error) {  
                alert(error);  
            }  
        }  

方法二：使用jQuery查找所有的按钮
[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
//按照jquery方式添加事件处理1  
       function BindByJquery1() {  
           try{  
               var btns = $('button');  
               //循环遍历所有的按钮，一个一个添加事件绑定  
               for (var i = 0; i < btns.length; ++i) {  
                   btns[i].onclick = function () {  
                       var uid = this.getAttribute('uid');  
                       alert("点击了按钮，uid = " + uid);  
                   }  
               }  
           }  
           catch (error) {  
               alert(error);  
           }  
       }  
jQuery查找到的是jQuery对象，需要使用[ ]将其转换成HTMLElement对象，然后和方法一一样进行绑定。
方法三：使用jQuery查找所有的按钮，使用on() 方法在被选元素及子元素上添加一个或多个事件处理程序
[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
//按照jquery方式添加事件处理2  
        function BindByJquery2() {  
            $('button').on("click", function () {  
                try{  
                    var uid = $(this)[0].getAttribute('uid');  
                    alert("lenght = " + $(this).length + "点击了按钮，uid = " + uid);  
                }  
                catch (error) {  
                    alert(error);  
                }  
            });  
  
        }  
        //按照jquery方式添加事件处理3  
        function BindByJquery3() {  
            try{  
                $(document).on("click", "button", function () {  
                    var uid = this.getAttribute('uid');  
                    alert("lenght = " + $(this).length + "点击了按钮，uid = " + uid);  
                });  
                $(document).on("click", "img", function () {  
                    //alert("img");  
                    win = window.open("http://blog.csdn.net/mfcing", "", "width=200,height=200");  
                     
                    //OpenWindow();  
                });  
            }  
            catch (error) {  
                alert(error);  
            }  
        }  
测试代码在网页加载完毕后执行

[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
</pre><pre name="code" class="javascript"><script>  
    $(document).ready(function () {  
        //BindByDom();  
        //BindByJquery2();  
        BindByJquery3();  
    });  
</script>  

demo页面
[html] view plain copy 在CODE上查看代码片派生到我的代码片
<html>  
<body>  
    <form action="" method="post">  
        <p>  
            您的意见对我很重要:  
            <textarea name="yj" clos="20" rows="20" onpause="OnPause()"></textarea>  
        <p />  
        <label style="font:200;color:#0094ff;font-family:'Microsoft YaHei';">测试程序</label>  
        <p />  
        <button id="100" title="测试" style="">点击测试</button>  
        <div class="div_parent">  
            <div>  
                <button style="color:#333333" uid="1">按钮1</button>  
            </div>  
            <p />  
            <div>  
                <button style="color:#444444" uid="2">按钮2</button>  
            </div>  
            <p />  
            <div>  
                <button style="color:#555555" uid="3">按钮3</button>  
            </div>  
            <p />  
        </div>  
  
        <p>  
            <button onclick="CopyToClipboard()">查看剪贴板文字</button>  
        <p>  
            <input id="test" text="输入框" />  
        </p>  
        <div style="display:none;padding-left:100px;padding-top:0px">  
  
        </div>  
    </form>  
</body>  
</html>
全部教程http://each.sinaapp.com/angular/index.html