今天碰到一个现象，若是一个函数中存在一个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事件的更多相关文章

  1. dojo事件驱动编程之事件绑定

    什么是事件驱动? 事件驱动编程是以事件为第一驱动的编程模型,模块被动等待通知(notification),行为取决于外来的突发事件,是事件驱动的,符合事件驱动式编程(Event-Driven Prog ...

  2. 关于ios苹果系统的中的右键事件，查遍了全网都没有的小技巧。

    前阵子公司要求写一套手机端,兼容各种平台和系统,当然,pc端也没有放过. 我用了bootstrap框架和jq.在安卓中的右键事件只需要取消浏览器默认事件,然后长按就可以触发pc端的右键事件,非常好,一 ...

  3. 记录Python学习中的几个小问题

    记录Python学习中的几个小问题,和C#\JAVA的习惯都不太一样. 1.Django模板中比较两个值是否相等 错误的做法 <option value="{{group.id}}&q ...

  4. Java 打印金字塔 or 打印带数字的金字塔 （Java 学习中的小记录）

    Java 打印金字塔 or 打印带数字的金字塔 (Java 学习中的小记录) 作者:王可利(Star·星星) 效果图: 代码如下: class Star8 { public static void m ...

  5. Java 需要记得、了解的关键词 （Java 学习中的小记录）

    Java 需要记得.了解的关键词 (Java 学习中的小记录)     作者:王可利(Star·星星) 总结:本次随笔,仅且拿来平时翻阅记忆用

  6. 关于HTML中，绝对定位，相对定位的理解...（学习HTML过程中的小记录）

    关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录)   作者:王可利(Star·星星) HTML中 相对定位:position:relative; 绝对定位:position ...

  7. 利用JQ实现的，高仿 彩虹岛官网导航栏（学习HTML过程中的小记录）

    利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录)   作者:王可利(Star·星星) 总结: 今天学习的jQ类库的使用,代码重复的比较多需要完善.严格区分大小写,在 $(" ...

  8. html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）

    html/css  盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width     是"宽 ...

  9. C# 中的委托和事件

    觉得这篇文章写的非常好,大神之作,由简入繁,对我这种初学者来说帮忙很大,特此留存下. 摘自:http://tracefact.net/CSharp-Programming/Delegates-and- ...

随机推荐

  1. 【算法笔记】B1017 A除以B

    1017 A除以B (20 分)   本题要求计算 A/B ,其中 A 是不超过 1000 位的正整数,B 是 1 位正整数.你需要输出商数 Q 和余数 R,使得 A=B×Q+R 成立. 输入格式: ...

  2. sublime 运行 python

    sublime 中 选择菜单 Tools--> Build System-->New Build System,编辑文件如下: /usr/local/Cellar/python/3.7.0 ...

  3. Java数组总结

    1.1    Arrays      jdk中为了便于开发,给开发者提供了Arrays(在Jdk的Util包中)类,其中包括了很多数组的常用操作.列如快速输出,排序,查找等.      1.1.1   ...

  4. LinuxShell脚本基础 6-case...esac的使用和通配符

    1.case...esac的使用 #!/bin/bash echo "请输入编号 选择不同的显示文件和目录方式:" echo "1 - 普通显示" echo & ...

  5. selenium+junit4实现参数化自动化测试

    业务场景:在www.1905.com电影网中实现两个用户的登陆操作. 代码如下: package com.m1905.junit; import java.util.Arrays; import ja ...

  6. 【转】selenium自动化测试用例需要关注的几点（一）

    自动化测试设计简介  注:参看文章地址 我们在本章提供的信息,对自动化测试领域的新人和经验丰富的老手都是有用的.本篇中描述最常见的自动化测试类型, 还描述了可以增强您的自动化测试套件可维护性和扩展性的 ...

  7. android viewpager 拿到当前显示的 fragment 的实例

    一个 ViewPager 通过 FragmentPagerAdapter 绑定了 3 个 fragment 可以通过 Fragment fragment = getSupportFragmentMan ...

  8. 【ExtJS】简单布局应用

    前几天学习了ExtJS的各种布局后,以下就是各种实践,从简单做起. 实现目的: 一个提交表单页,一个显示信息页,表单为个人基本资料输入,显示页为基本信息展示. 内容: 总体布局为border布局,展示 ...

  9. Android文字识别之tesseract的使用

    关于tesseract识别工具有Google提供的版本有tesseract-android-tools,不过还有一个tesseract-two也是非常好用的,这里我们使用的是tesseract-two ...

  10. Java设计模式之适配器模式(Adapter)

    转载:<JAVA与模式>之适配器模式 这个总结的挺好的,为了加深印象,我自己再尝试总结一下 1.定义: 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法 ...