方法一:使用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. live555源码研究(五)------DynamicRTSPServer类

    一.类DynamicRTSPServer作用 1,提供RTSP服务 二.类DynamicRTSPServer继承关系图

  2. GridBagLayout:网格包布局管理器

    GridBagLayout:网格包布局管理器   GridBagLayout可以说是布局管理器Layout中最复杂的一个,其中涉及到的参数也比较得多,比如说: GridBagConstraints g ...

  3. JBoss7 局域网无法访问 解决方法

    JBoss7 局域网无法访问 解决方法 在standalone模式,修改/standalone/configuration/standalone.xml.如下 修改或新增一个interface. &l ...

  4. Android 之 内存管理-查看内存泄露(三)

    概述 在android的开发中,要时刻主要内存的分配和垃圾回收,因为系统为每一个dalvik虚拟机分配的内存是有限的,在google的G1中,分配的最大堆大小只有16M,后来的机器一般都为24M,实在 ...

  5. PHP Apache Access Log 分析工具 拆分字段成CSV文件并插入Mysql数据库分析

    现在需要分析访问日志,怎么办? 比如分析D:\Servers\Apache2.2\logs\access2014-05-22.log http://my.oschina.net/cart/针对这个问题 ...

  6. 【转】android的消息处理机制(图+源码分析)——Looper,Handler,Message

    原文地址:http://www.cnblogs.com/codingmyworld/archive/2011/09/12/2174255.html#!comments 作为一个大三的预备程序员,我学习 ...

  7. 如何使用UDP进行跨网段广播

    广播域首先我们来了解一下广播域的概念.广播域是网络中能接收任一台主机发出的广播帧的所有主机集合.也就是说,如果广播域内的其中一台主机发出一个广播帧,同一广播域内所有的其它主机都可以收到该广播帧.广播域 ...

  8. 用JDBC访问ORACLE数据库 关于commit 增快效率 大数据 等的整理

    1.问:用JDBC访问ORACLE数据库,做DELETE操作,能用JAVA多线程实现吗? ORACLE服务器要怎么配?(以下答案来自网络,仅供参考) 答: Oracle有自己的锁机制.就算你开100条 ...

  9. Webdriver API (二)

    (转载) 1.3 打开测试页面 对页面对测试,首先要打开被测试页面的地址(如:http://www.google.com),web driver 提供的get方法可以打开一个页面: // And no ...

  10. GCC 编译命令

    今天突然被同事问道一个GCC编译命令为的问题,感觉对相应内容生疏了,赶紧整理下相关内容,梳理下相关知识. GCC命令提供了非常多的命令选项,但并不是所有都要熟悉,初学时掌握几个常用的就可以了,到后面再 ...