【小记录】关于dojo中的on事件
今天碰到一个现象，若是一个函数中存在一个on事件（例如点击事件），在该函数连续触发两次之后在去触发里面的on事件，会发现改时间所对应的函数被调用了两次，若父函数被连续触发N次后再取触发on事件，其对应的函数会被调用N次。然后JS原生的事件不会有此现象。对比代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<script type="text/javascript" src="http://localhost:8080/gisapi/library/3.9/3.9/init.js"></script>
</head>
<body>
<button id="test1">test1</button>
<button id="test2">test2</button> <script type="text/javascript">
require(["dojo/on"], function (on) {
var oTest1 = document.getElementById("test1");
var oTest2 = document.getElementById("test2");
on(oTest1, "click", function () {
alert(1);
on(oTest2, "click", function () {
alert(2);
});
});
});
</script>
</body>
</html>
（上面我用了arcgis for javascript的本地api，没有的朋友可以改成dojo的api）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
</head>
<body>
<button id="test1">test1</button>
<button id="test2">test2</button> <script type="text/javascript">
var oTest1 = document.getElementById("test1");
var oTest2 = document.getElementById("test2"); oTest1.onclick = function () {
alert(1);
oTest2.onclick = function () {
alert(2);
}
}
</script>
</body>
</html>
总结：若函数中有dojo的on事件，每次执行函数后on事件都会呈现出“预触发”的状态，该函数每次执行一次该状态都会+1,等到触发了on事件，“预触发”状态会转变为“被触发“状态（有几此”预触发“状态就会触发几次，虽然我们只是触发了一次该事件）。其中要主要的是，只要执行了函数，”预触发“状态都会被+1，和期间有没有触发on事件无关。
----------------------------------------------------------------------更新----------------------------------------------------------------------
之后我又发现另外一个现象，如果把on事件中的函数单独的外面封装后再引用的话，其输出效果便为正常，即没有“预触发”状态这一说法。事例程序如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<script type="text/javascript" src="http://localhost:8080/gisapi/library/3.9/3.9/init.js"></script>
</head>
<body>
<button id="test1">test1</button>
<button id="test2">test2</button> <script type="text/javascript">
require(["dojo/on"], function (on) {
var n = 0;
var oTest1 = document.getElementById("test1");
var oTest2 = document.getElementById("test2");
on(oTest1, "click", function () {
on(oTest2, "click", test);
alert(1);
}); function test () {
alert(2);
}
});
</script>
</body>
</html>
Stick to write blog!
【小记录】关于dojo中的on事件的更多相关文章
- dojo事件驱动编程之事件绑定
什么是事件驱动? 事件驱动编程是以事件为第一驱动的编程模型,模块被动等待通知(notification),行为取决于外来的突发事件,是事件驱动的,符合事件驱动式编程(Event-Driven Prog ...
- 关于ios苹果系统的中的右键事件，查遍了全网都没有的小技巧。
前阵子公司要求写一套手机端,兼容各种平台和系统,当然,pc端也没有放过. 我用了bootstrap框架和jq.在安卓中的右键事件只需要取消浏览器默认事件,然后长按就可以触发pc端的右键事件,非常好,一 ...
- 记录Python学习中的几个小问题
记录Python学习中的几个小问题,和C#\JAVA的习惯都不太一样. 1.Django模板中比较两个值是否相等 错误的做法 <option value="{{group.id}}&q ...
- Java 打印金字塔 or 打印带数字的金字塔 （Java 学习中的小记录）
Java 打印金字塔 or 打印带数字的金字塔 (Java 学习中的小记录) 作者:王可利(Star·星星) 效果图: 代码如下: class Star8 { public static void m ...
- Java 需要记得、了解的关键词 （Java 学习中的小记录）
Java 需要记得.了解的关键词 (Java 学习中的小记录) 作者:王可利(Star·星星) 总结:本次随笔,仅且拿来平时翻阅记忆用
- 关于HTML中，绝对定位，相对定位的理解...（学习HTML过程中的小记录）
关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录) 作者:王可利(Star·星星) HTML中 相对定位:position:relative; 绝对定位:position ...
- 利用JQ实现的，高仿 彩虹岛官网导航栏（学习HTML过程中的小记录）
利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录) 作者:王可利(Star·星星) 总结: 今天学习的jQ类库的使用,代码重复的比较多需要完善.严格区分大小写,在 $(" ...
- html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）
html/css 盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽 ...
- C# 中的委托和事件
觉得这篇文章写的非常好,大神之作,由简入繁,对我这种初学者来说帮忙很大,特此留存下. 摘自:http://tracefact.net/CSharp-Programming/Delegates-and- ...
随机推荐
- Angular material mat-icon 资源参考_File
ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...
- GTP
GPRS隧道协议(GPRS Turning Protocol) GTP是一个高层协议,位于TCP/IP或UDP/IP等协议上,提供主机间端到端通信, 通过隧道标志(TEI)在路径协议上复用 GTP ...
- 安装Windows 64 位 mysql 最新版本解压包中没有data目录和my-default.ini及服务无法启动的快速解决办法
mysql官网下载地址:https://dev.mysql.com/downloads/mysql/ 首先安装包解压后,没有网上教程里面提到的data文件夹和my-default.ini 配置环境变量 ...
- python __getattribute__、__getattr__、__setattr__详解
__getattribute__ 官方文档中描述如下: 该方法可以拦截对对象属性的所有访问企图,当属性被访问时,自动调用该方法(只适用于新式类).因此常用于实现一些访问某属性时执行一段代码的特性. 需 ...
- 高并发和多线程——Java内存模型
个人理解: 1.并发编程分为三个核心:分工.同步.互斥 2.CPU.内存.I/O存在速度差异问题. 3.线程切换导致原子性问题.编译优化导致有序性问题.缓存导致可见性问题. 4.Java内存模型规范了 ...
- MySQL 查询结果分组 group by
[group by {col_name | position} [ASC | DESC ]] 分组条件 [HAVING where_condition] HAVING 后面的条件必须出现在select ...
- Git学习系列之为什么选择Git？
为什么选择Git? 流行的软件版本开源管理软件,有CVS.SVN.GIT版本管理工具,Git的优势在哪里呢? Git 和 CVS.SVN不同,是一个分布式的源代码管理工具,它很强,也很快,Linux内 ...
- 权重平等分布局And TableRow布局误区
开头语: 本人最近在自学Android,虽然本人有2年Java Web的开发经验.但是发现Android的自学之路并不是那么平坦,我没有Android真机.但是有一个window phone的手机.开 ...
- 【Javascript】Javascript原型与继承
一切都是对象! 以下的四种(undefined, number, string, boolean)属于简单的值类型,不是对象.剩下的几种情况——函数.数组.对象.null.new Number(10) ...
- idea maven install 卡住，无报错排查。
今天使用idea打包,执行install,看控制台日志,卡主了(意思是日志不继续在控制台输打印了,卡主了,也看不到错误),也没有报错,然后进行排查. 进入dos命令,进入到项目的根目录,使用 运行 m ...