转自：https://blog.csdn.net/leadergg/article/details/5927614?utm_source=blogxgwz5

ExtJs事件（自定义事件、on、eventManager）示例

鉴于最近更新主页比较慢，先把最近更新的extJs示例发到这里好了。

页面代码：

 <body>

         <link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />

         <mce:script type="text/javascript" src="../../../../ext/ext-base.js" mce_src="ext/ext-base.js"></mce:script>

         <mce:script type="text/javascript" src="../../../../ext/ext-all.js" mce_src="ext/ext-all.js"></mce:script>

         <div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">

             事件使用例子，包括自定义事件及on、addListener和EventManager的使用。

         </div>

         <div id="eventTestDiv" style="padding: 10px 10px 10px 20px;width:150px;height:50px;background-color:green;">

             鼠标移到我试试！

         </div>

         <br>

         <div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">

             <input type="button" name="button1" id="button1" value="点我" />

         </div>

         <mce:script type="text/javascript" src="CustomEvent.js" mce_src="CustomEvent.js"></mce:script>

     </body>

js代码

 /****************************************

  * 自定义事件使用

  */

 var Person = function(){

     // 注册事件,该事件名字为：say

     this.addEvents("say");

     // 另外一种方式注册多个事件

     this.addEvents({

         "run" : true,

         "see": false

     });

 }

 // Extjs里的事件处理,只有继承了Ext.util.Observable类才具有事件功能

 Ext.extend(Person,Ext.util.Observable);

 // 定义相关执行的方法

 var speak = function(){

     alert("I can speak!");

 }

 var run = function(){

     alert("I can run!");

 }

 var see = function(){

     alert("I can see the word!");

 }

 var person = new Person();

 // 将方法say绑定到事件say上。二者名字可以不一样

 person.on("say", speak);

 person.on("run", run);

 person.on("see", see);

 // 触发事件，这里只触发了say和run。see事件没有触发就不会发生

 person.fireEvent("say");

 person.fireEvent("run");

 /*****************************************/

 Ext.onReady(function() {

     // 返回的Element对象,不等价于document.getElementById(id)

     // Ext.getDom(id)才等价于document.getElementById(id)

     var eventTestDiv = Ext.get("eventTestDiv");

     // 通过EventManager来实现，也可以通过obj.addListener实现，见下面的例子

     Ext.EventManager.addListener(eventTestDiv,"mouseover",function(){

         Ext.Msg.alert('信息', 'Id：' + this.id + '<br>内容：' + this.innerHTML);

     });

     Ext.EventManager.addListener(eventTestDiv,"click",function(){

         Ext.Msg.alert('信息', 'Id：' + this.id

             + '<br>name：' + this.name

              + '<br>value：' + this.value);

     });

     /**

      使用addListener的例子，第三个参数是指作用域，第四个参数是个配置选项

      有4个配置选项:

         delay{Number}： 触发事件后处理函数延时执行的时间。(触发事件多久后执行指定的函数)；

         scope{Object}： 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。(如果第3个参数设置了,此处可以省)；

         single{Boolean}： true代表为事件触发后加入一个下次移除本身的处理函数。(事件触发一次后，就被移走，以后再触发该事件无效)；

         buffer{Number}: 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。

         以下的配置未用过：

             delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。

             stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。

             preventDefault {Boolean} : true表示为阻止默认动作。

             stopPropagation {Boolean} : true表示为阻止事件传播。

             normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。

     */

     var button1 = Ext.get("button1");

     // addListener等价于on，on只是addListener的简写

     button1.addListener("click",function(){

         // 获得实际传递参数值，前两个参数是EventObject和Element，第三个是option选项对象

         var msg = '<br/>获取选填参数信息：<br/>选填参数个数：' + arguments.length + "<br/>";

         for(var i in arguments[2]) {

             msg += i + "：" + arguments[2][i] + "<br/>";

         }

         Ext.Msg.alert('信息', '打印eventTestDiv的信息：<br/><br/>Id：' + this.id

             + "<br/>" + msg

         );

     },eventTestDiv, {

         // 事件延迟触发事件

         delay : 500,

         // 是否只触发一次

         single: false,

         msg   : '我是追加的参数'

     });

     /**

      事件的几种写法（addListener和on是等价的）：

      var fn = function (){

          // 这里添加需要处理的逻辑

      };

     // 第一种写法

     button1.addListener("click",fn,button1);

     button1.addListener("mouseover",fn,button1);

     //第二种写法

     button1.on({

         click     : fn,

         mouseover : fn,

         scope     : button1

     });

     //第三种写法

     button1.on({

         click     : {scope:button1, delay:3000, fn:fn},

         mouseover : {scope:button1, delay:1000, fn:fn}

     });

     */

 })

63.ExtJs事件（自定义事件、on、eventManager）示例的更多相关文章

  1. 如何给ActiveX控件添加“事件”“属性”“标准事件”“自定义事件”等一些相关操作

    上一篇小编带大家熟悉了一下ActiveX的建立以及相关的概念,(http://blog.csdn.net/u014028070/article/details/38424611) 本文介绍下如何给控件 ...

  2. Extjs中自定义事件

    //Ext中所谓的响应事件,响应的主要是组件中已经定义的事件(通过看api各组件的events可以找到)         //主要作用就是利用on调用各组件的事件处理函数,然后在函数中作用户想要的操作 ...

  3. 主动触发事件 自定义事件 trigger 及其用法

    1. 触发自定义事件方式 js.jq 2. jq 触发 2.1 默认支持的事件 $('#h').on('click',function(){ $(this).append('<p>p< ...

  4. C#事件-自定义事件的使用方法（转载）

    1.声明一个委托类 public delegate SomethingChangedHandler(object sender,EventArgs e); 2.在你的类中声明一个事件绑定到该委托 pu ...

  5. Java的事件自定义事件学习

    课程设计要做一个游戏,由于对C++不是很熟悉,老师也准许使用java 或者其他的语言,在.net我学过事件,一种委托回调,但是在java 我不是很了解,应该原理都相同吧! 游戏大致是这样的,现在这在写 ...

  6. jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间

    http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...

  7. Spring Boot（六）自定义事件及监听

    事件及监听并不是SpringBoot的新功能,Spring框架早已提供了完善的事件监听机制,在Spring框架中实现事件监听的流程如下: 自定义事件,继承org.springframework.con ...

  8. js原生创建模拟事件和自定义事件的方法

    让我万万没想到的是,原来<JavaScript高级程序设计(第3版)>里面提到的方法已经是过时的了.后来我查看了MDN,才找到了最新的方法. 模拟鼠标事件MDN上已经说得很清楚,尽管为了保 ...

  9. javascript和jquey的自定义事件小结

    “通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...

  10. 【教程】【FLEX】#003 自定义事件、模块间通讯

    本篇笔记,主要阐明 事件是如何创建 和 如何使用自定义事件达到模块之间通讯 的效果. 句子解释: 什么叫做模块之间的通讯呢?? 简单点说,就是两个模块之间可以互相传数据. A模块 可以接收到 B模块的 ...

随机推荐

  1. 动态生成java、动态编译、动态加载

    我曾经见过一个“规则引擎”,是在应用系统web界面直接编写java代码,然后保存后,规则即生效,我一直很是奇怪,这是如何实现的呢?实际这就好像jsp,被中间件动态的编译成java文件,有被动态的编译成 ...

  2. HTML5网页如何调用浏览器APP的微信分享功能？

    if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Al ...

  3. [Python3网络爬虫开发实战] 1.1-Python3的安装

    既然要用Python 3开发爬虫,那么第一步一定是安装Python 3.这里会介绍Windows.Linux和Mac三大平台下的安装过程. 1. 相关链接 官方网站:http://python.org ...

  4. python3虚拟环境应用

    python3自带虚拟环境venv,大致操作只有三步 1. 创建虚拟环境 python3 -m venv venv(名称随意) 2. 激活虚拟环境 source venv/bin/activate 3 ...

  5. c#读取.config文件内容

    今天在做项目的时候,由于程序同时启动多种情况的数据,测试分为多个人,就需要把数据分离开来,于是用了一个临时的配置文件,让测试在配置文件修改相应数据从而让各个测试互相不影响! 步骤: 第一步:添加一个A ...

  6. 九度oj 题目1066：字符串排序

    题目1066:字符串排序 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6487 解决:2670 题目描述: 输入一个长度不超过20的字符串,对所输入的字符串,按照ASCII码的大小从小到 ...

  7. CentOS服务器上部署 oracle10gr2

    1.下载Centos系统 Linux 镜像文件.         推荐使用 CentOS5.4,下载地址:http://isoredirect.centos.org/centos/5/isos/i38 ...

  8. ZOJ 1654 Place the Robots

    题目大意: 在空地上放置尽可能多机器人,机器人朝上下左右4个方向发射子弹,子弹能穿过草地,但不能穿过墙, 两个机器人之间的子弹要保证互不干扰,求所能放置的机器人的最大个数 每个机器人所在的位置确定了, ...

  9. [K3Cloud2.0]如何解决创建管理中心失败的问题

    标题有点大,实际上,Cloud2.0产品质量还是顶呱呱的,至于在安装使用过程中出现的这个管理中心无法创建的问题,实际上是与我的网络环境有关,下面讲一下我的网络环境: 开发团队目前所在网段:10.30. ...

  10. 选择数字（codevs 3327）

    题目描述 Description 给定一行n个非负整数a[1]..a[n].现在你可以选择其中若干个数,但不能有超过k个连续的数字被选择.你的任务是使得选出的数字的和最大. 输入描述 Input De ...