您的位置：首页 > Web前端 > JQuery

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

2016-10-12 22:36 706 查看

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



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航