方法一：使用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>

Javascript(jQuery)中绑定页面上所有按钮点击事件的几种方式的更多相关文章

  1. Jquery中动态生成的元素没有点击事件或者只有一次点击事件

    今天用jq做动态生成的元素的click事件时,click只执行了一次,当然有些朋友可能根本没执行, 执行了一次的原因是因为可能有函数加载了一遍,一次都没执行的可能是没绑定对象或者jq版本问题, 动态生 ...

  2. NGUI 按钮点击事件的两种绑定形式

    面板属性栏绑定 写一个脚本,定义一个Public的方法 Notify中选择物体时,选中自己 然后就可以选择通知到写的那个脚本的里边的public方法 代码绑定 创建一个代码文件,挂载到按钮对象上 代码 ...

  3. jquery中 苹果手机对on触发的点击事件无效果

    在被点击的元素上加上样式  cursor:pointer;  苹果手机就可以触发事件了

  4. jquery中对于为一组标签赋予点击事件

    可以用each,但是each不能对动态的元素进行事件的绑定, 不过,其实也很简单,只需要获取所有的标签集,然后用动态绑定的方法,比如live进行绑定就可以了. 有时候,其实不难,只是自己想的太过复杂. ...

  5. UITableViewCell 上的按钮点击事件

     以前做tableViewCell的button点击事件,总是建立一个全局的可变数组,把data放在数组里,点击获取button的tag值,根据tag从数组了里取data. 其实,如果section只 ...

  6. jQuery中绑定事件bind() on() live() one()的异同

    jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也 ...

  7. jQuery中绑定事件的几种方法

    以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){});  (2)target.bind("click",functi ...

  8. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  9. Javascript Jquery 中的数组定义与操作_子木玲_新浪博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

随机推荐

  1. JixiPix 各种图像软件，很不错的说，还有affinity designer

    http://jixipix.com/purchase.html https://www.board4allcz.eu/showthread.php?t=639107 https://affinity ...

  2. POJ 2255 Tree Recovery 二叉树的遍历

    前序和中序输入二叉树,后序输出二叉树:核心思想只有一个,前序的每个根都把中序分成了两部分,例如 DBACEGF ABCDEFG D把中序遍历的结果分成了ABC和EFG两部分,实际上,这就是D这个根的左 ...

  3. C#+SQL数据库备份和还原

    使用前要导入SQLDMO.dll(在com组件中导入Microsoft SQLDMO Object Library即可) /// /// DbOper类,主要应用SQLDMO实现对Microsoft ...

  4. XMPP聊天客户端环境搭建

    1.服务器选择:ejabberd,具体安装过程请参考:http://blog.csdn.net/linhanmin/article/details/9876819 2.客户端配置: 采用xmppfra ...

  5. #error作用与举例

    2013-09-05 14:32:17   #error命令是C/C++语言的预处理命令之一,当预处理器预处理到#error命令时将停止编译并输出用户自定义的错误消息.   语法: #error [用 ...

  6. IOS,Object C学习过程中遇到的attributes

    @property 定义一个属性 @synthesize 告诉编译器自动为属性自动生成 getter 和setter方法 在定义属性的时候会用到如下@attributes nonatomic,告诉编译 ...

  7. 1439. Battle with You-Know-Who（splay树）

    1439 路漫漫其修远兮~ 手抄一枚splay树 长长的模版.. 关于spaly树的讲解   网上很多随手贴一篇 貌似这题可以用什么bst啦 堆啦 平衡树啦 等等 这些本质都是有共同点的 查找.删除特 ...

  8. poj3468(线段树 边覆盖)

    #include<cstdio> int lb,rb,data; long long sum[5000000],extra[5000000]; void add(int l,int r,i ...

  9. JSOI2014第三轮总结

    这次发挥的比上次好很多 毕竟这次的话好歹上100了,也不是特别丢人 但更主要的是,该得的分没有丢(不禁想到了R1的线段树和R2的网络流,可惜啊) 不会做的题目积极去骗分了(如D1T1,2和D2T1) ...

  10. linux下socket keep alive讲解

    [需求] 不影响服务器处理的前提下,检测客户端程序是否被强制终了.[现状]服务器端和客户端的Socket都设定了keepalive属性.服务器端设定了探测次数等参数,客户端.服务器只是打开了keepa ...