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