方法一：使用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方式添加事件处理1function 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方式添加事件处理2function BindByJquery2() {$('button').on("click", function () {try{var uid = $(this)[0].getAttribute('uid');alert("lenght = " + $(this).length + "点击了按钮，uid = " + uid);}catch (error) {alert(error);}});}//按照jquery方式添加事件处理3function 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("/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>
如果觉得《Javascript(jQuery)中绑定页面上所有按钮点击事件的几种方式》对你有帮助，请点赞、收藏，并留下你的观点哦！
