zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    SCRUM团队
    SCRUM的四大支柱
    SCRUM的五个价值观
    SCRUM的五个事件
    SCRUM的三个工件
    SCRUM团队的三个角色
    经验性过程
    Windows UWP开发系列 – RelativePanel
    Windows UWP开发系列 – 控件默认样式
    Windows UWP开发系列 – 3D变换
  • 原文地址:https://www.cnblogs.com/xfdmb/p/6133767.html
Copyright © 2011-2022 走看看