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

来源：互联网发布：大胃王密子君淘宝店编辑：程序博客网时间：2024/05/16 12:28

方法一：使用document对象查找所有的按钮

//按照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查找所有的按钮

 //按照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() 方法在被选元素及子元素上添加一个或多个事件处理程序

//按照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);            }        }

测试代码在网页加载完毕后执行

</pre><pre name="code" class="javascript"><script>    $(document).ready(function () {        //BindByDom();        //BindByJquery2();        BindByJquery3();    });</script>

demo页面

<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>

0 0