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

最新推荐文章于 2024-05-08 12:24:11 发布

疯狂-的-蜗牛

最新推荐文章于 2024-05-08 12:24:11 发布

阅读量2w

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/mfcing/article/details/52789482

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

方法一：使用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" οnpause="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 οnclick="CopyToClipboard()">查看剪贴板文字</button>
        <p>
            <input id="test" text="输入框" />
        </p>
        <div style="display:none;padding-left:100px;padding-top:0px">

        </div>
    </form>
</body>
</html>

疯狂-的-蜗牛

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Javascript(jQuery)中绑定页面上所有按钮点击事件的几种方式

方法一：使用document对象查找所有的按钮//按照dom的方式添加事件处理 function BindByDom() { try{ var htmlBtns = document.getElementsByTagName('button');//获取HTMLCollection对象集合
复制链接

扫一扫

专栏目录