“绑定事件”是UI开发中最常用到的操作之一,这里介绍几种方法,供大家选择:
1、html内嵌法
顾名思义,就是在html代码里节点代码里绑定事件。如下面代码
<html>
<head>
<script type="text/javascript">
function test(){
alert("bang");
}
</script>
</head>
<body>
<input type="button" onclick="test()" value="click me"/>
</body>
</html>
需要注意的是,onclick后面的function赋值是需要添加括号的,否则事件无法绑定和触发。
如果onclick需要连续执行多个操作,可以按如下方法绑定事件。
<html>
<head>
<script type="text/javascript">
function test(){
alert("bang");
}
function test1(){
alert("bang2");
}
</script>
</head>
<body>
<input type="button" onclick="javascript:test();test1();" value="click me"/>
</body>
</html>
其中的“JavaScript:”也可以不加,具体原因,待查。
其中关于事件参数的传递和设置请参看 window.event 的介绍。
2、动态绑定
在很多时候,我们需要动态的创建节点,然后将某个或某几个事件绑定在该新建对象上。动态绑定又包含两种方式:
1、直接为对象赋值
document.getElementById("xxx").onclick = test;
2、使用两个重要的Js函数:attachEvent 和 addEventListener。
方法1和2的区别在于,如果连续执行如果执行如下的连续方法1赋值操作,最后的结果是只有test3被绑定给了对象。
document.getElementById("xxx").onclick = test1;
document.getElementById("xxx").onclick = test2;
document.getElementById("xxx").onclick = test3;
而方法2如果采用相同的连续赋值方式,则会产生追加的效果,事件触发是的执行顺序,由下至上。
另外对于方法1,我们要注意,赋给“onclick”的值只是一个“引用“,一定不能加括号,否则事件就会被执行,而赋给onclick的就是事件执行的返回结果了。
对于方法2我们来详细了解下。两种js方法,在IE下可用attachEvent,在FF下则要用addEventListener。
attachEvent()有两个参数
- 第一个是事件名称
- 第二个是需执行的函数;
addEventListener()有三个参数
- 第一个是事件名称,但与IE事件不同的是,事件不带"on",比如"onsubmit"在这里应为"submit"
- 第二个是需执行的函数
- 第三个参数为布尔值,表示该事件的响应顺序(useCapture),userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。
html代码
<div id="div_test"> <input type="button" id="btn_test" value="se4.cn技术基地" /> </div>
js代码
window.onload=function(){ document.getElementById("div_test").addEventListener("click",test1,false); document.getElementById("btn_test").addEventListener("click",test2,false);
}
function test1(){ alert("外层div触发") }
function test2(){ alert("内层input触发") }
如果userCapture是true则test1先触发,如果userCapture是false则test2先触发。
请看如下示例代码。
<html>
<head>
<script type="text/javascript">
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
}
function test(){
alert("bang");
}
function test1(){
alert("bang2");
}
function init(){
var input = document.createElement('input');
input.type = 'button';
input.value = 'click me';
addEventHandler(input,'click',test);
addEventHandler(input,'click',test1);
document.getElementById('button_container').appendChild(input);
}
</script>
</head>
<body onload="init()">
<div id="button_container"></div>
</body>
</html>
点击按钮后,事件执行的顺序是 test1-->test2。
因为IE和Firefox绑定事件的方法不一样,所以需要判断浏览器类型。具体方法参见:浏览器类型判别。
分享到:
相关推荐
事件绑定的3中常用方法:传统绑定、W3C绑定方法、IE绑定方法。但是,在实际开发中对于我们来讲重要的是需要一个通用的、跨浏览器的绑定方法。如果我们在互联网上搜索一下会发现许多方法,以下是比较知名的几种方法:...
添加事件的做法,若出现为同一个节点绑定了同名的事件,会出现覆盖效果。 addEventListener(事件名,事件函数,isBubble) isBubble :默认为false 事件是冒泡机制 true 事件为捕获机制 注意:事件名没有on前缀 ...
举个例子:我想定义这两种节点,或者最开始我想弄个数据库表的描述列表,想想头疼,如果让我用html定义的话,是挺快,但是用函数得想各种嵌套,所以就产生了这个插件。2.安装npm install node-gen-logicflow-plugin...
该插件的节点默认绑定的单击事件,由此引起了单击事件和双击事件的冲突。 编写测试代码 引起冲突的代码: 问题效果展示: 每一次触发双击事件都会引起两次单击事件 解决冲突的代码: 解决问题效果展示: 完美...
该库以几种不同的方式提供了Austin Appleby的非加密“ MurmurHash”哈希算法功能。 主要特征: 阻塞和异步api接口 基于其他MurmurHash3 32位和128位渐进实现 流封装器,用于带有渐进式哈希器。类似于bi-api接口 渐...
而且这一步只能一个节点一个节点慢慢地生成,虽然可以通过减小单个节点的HTML元素量的方法提高一些速度,但是对于对于上千个节点来说仍然需要等上几十秒。 (1个节点如果有5个HTMLElement,生成1000个节点大概3秒...
2、 创建对象有几种方法(必会) 79 4、简述创建函数的几种方式? (必会) 79 5、Javascript 创建对象的几种方式? (必会) 79 6、请指出 JavaScript 宿主对象和原生对象的区别?(必会) 81 7、 JavaScript 内置...
3.10.3 功能实现 3.10.4 代码分析 3.11 本章小结 第4章 jquery中的事件与应用 4.1 事件机制 4.2 页面载入事件 4.2.1 ready()方法的工作原理 4.2.2 ready()方法的几种相同写法 4.3 绑定事件 ...
-为TreeNode增加AutoPostBack属性,增加事件数据类TreeCheckEventArgs,为Tree增加事件NodeCheck。 -示例在:http://extasp.net/data/tree_run.aspx -Grid增加GetNoSelectionAlertInParentReference函数,用来...
4.2.2 ready()方法的几种相同写法/86 4.3 绑定事件/86 4.4 切换事件/90 4.4.1 hover()方法/90 4.4.2 toggle()方法/93 4.5 移除事件/94 4.6 其他事件/96 4.6.1 方法one() /97 4.6.2 方法trigger () /98 4.7...
(4)的方法会在指定的Dom对象上绑定响应ajax执行的事件。 (5)同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。 var html = $.ajax({ url: "some.php", async: false }).responseText;...
前言 关于JQ的DOM操作面试问题很多,可以从各个点问,所以列举几个常见问题,毕竟面试只是过程,重要的是知识自己掌握了。...remove() :删除节点,并删除元素节点绑定的事件。 empty() :清空节点元素的内
《C#全能速查宝典》共分为8章,分别介绍了C#语言基础、Windows窗体及常用控件、Windows高级控件、控件公共属性、方法及事件、数据库开发、文件、数据流与注册表、GDI+绘图技术和C#高级编程,共包含562个C#编程中常用...
下面是 jQuery 中事件方法的一些例子: Event 函数 绑定函数至 $(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时) $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $...
部署模型:JD Chain 主要部署组件包括以下几种:共识节点共识节点即参与共识的节点,这是系统的核心组件,承担了运行共识协议、管理账本数据、运行智能合约的职责。一个区块链网络由多个共识节点组成,共识节点的...
-为TreeNode增加AutoPostBack属性,增加事件数据类TreeCheckEventArgs,为Tree增加事件NodeCheck。 -示例在:http://extasp.net/data/tree_run.aspx -Grid增加GetNoSelectionAlertInParentReference函数,用来...
虚拟DOM:dom操作是非常耗费性能的, 不再使用原生的dom操作节点,极大解放dom操作,但具体操作的还是dom不过是换了另一种方式; 运行速度更快:相比较与react而言,同样是操作虚拟dom,就性能而言,vue存在很大的...
虚拟DOM:dom操作是非常耗费性能的, 不再使用原生的dom操作节点,极大解放dom操作,但具体操作的还是dom不过是换了另一种方式; 运行速度更快:相比较与react而言,同样是操作虚拟dom,就性能而言,vue存在很大的...
虚拟 DOM:dom 操作是非常耗费性能的, 不再使用原生的 dom 操 作节点,极大解放 dom 操作,但具体操作的还是 dom 不过是换了另 一种方式; 运行速度更快:相比较与 react 而言,同样是操作虚拟 dom,就性能而 言,vue ...
ASP.NET的FlyTreeView(版本2.0,3.0,3.5,4.0)是一种快速,更轻,功能齐全的AJAX ...服务器端代码利用ASP.NET技术,从而使开发人员可以使用服务器控件的基础上要求树状内容,负荷节点和轻松地处理所有TreeView事件