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

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

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

页面代码：

 1 <body>
 2         <link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
 3         <mce:script type="text/javascript" src="../../../../ext/ext-base.js" mce_src="ext/ext-base.js"></mce:script>
 4         <mce:script type="text/javascript" src="../../../../ext/ext-all.js" mce_src="ext/ext-all.js"></mce:script>
 5         <div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">
 6             事件使用例子，包括自定义事件及on、addListener和EventManager的使用。
 7         </div>
 8         <div id="eventTestDiv" style="padding: 10px 10px 10px 20px;width:150px;height:50px;background-color:green;">
 9             鼠标移到我试试！
10         </div>
11         <br>
12         <div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">
13             <input type="button" name="button1" id="button1" value="点我" />
14         </div>
15         <mce:script type="text/javascript" src="CustomEvent.js" mce_src="CustomEvent.js"></mce:script>
16     </body>

js代码

  1 /****************************************
  2  * 自定义事件使用
  3  */
  4 var Person = function(){
  5     // 注册事件,该事件名字为：say
  6     this.addEvents("say");
  7     // 另外一种方式注册多个事件
  8     this.addEvents({
  9         "run" : true,
 10         "see": false
 11     });
 12 }
 13 // Extjs里的事件处理,只有继承了Ext.util.Observable类才具有事件功能
 14 Ext.extend(Person,Ext.util.Observable);
 15
 16 // 定义相关执行的方法
 17 var speak = function(){
 18     alert("I can speak!");
 19 }
 20 var run = function(){
 21     alert("I can run!");
 22 }
 23 var see = function(){
 24     alert("I can see the word!");
 25 }
 26
 27 var person = new Person();
 28 // 将方法say绑定到事件say上。二者名字可以不一样
 29 person.on("say", speak);
 30 person.on("run", run);
 31 person.on("see", see);
 32
 33 // 触发事件，这里只触发了say和run。see事件没有触发就不会发生
 34 person.fireEvent("say");
 35 person.fireEvent("run");
 36 /*****************************************/
 37
 38 Ext.onReady(function() {
 39     // 返回的Element对象,不等价于document.getElementById(id)
 40     // Ext.getDom(id)才等价于document.getElementById(id)
 41     var eventTestDiv = Ext.get("eventTestDiv");
 42     // 通过EventManager来实现，也可以通过obj.addListener实现，见下面的例子
 43     Ext.EventManager.addListener(eventTestDiv,"mouseover",function(){
 44         Ext.Msg.alert('信息', 'Id：' + this.id + '<br>内容：' + this.innerHTML);
 45     });
 46     Ext.EventManager.addListener(eventTestDiv,"click",function(){
 47         Ext.Msg.alert('信息', 'Id：' + this.id
 48             + '<br>name：' + this.name
 49              + '<br>value：' + this.value);
 50     });
 51     /**
 52      使用addListener的例子，第三个参数是指作用域，第四个参数是个配置选项
 53      有4个配置选项:
 54         delay{Number}： 触发事件后处理函数延时执行的时间。(触发事件多久后执行指定的函数)；
 55         scope{Object}： 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。(如果第3个参数设置了,此处可以省)；
 56         single{Boolean}： true代表为事件触发后加入一个下次移除本身的处理函数。(事件触发一次后，就被移走，以后再触发该事件无效)；
 57         buffer{Number}: 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。
 58         以下的配置未用过：
 59             delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。
 60             stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。
 61             preventDefault {Boolean} : true表示为阻止默认动作。
 62             stopPropagation {Boolean} : true表示为阻止事件传播。
 63             normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。
 64     */
 65     var button1 = Ext.get("button1");
 66     // addListener等价于on，on只是addListener的简写
 67     button1.addListener("click",function(){
 68         // 获得实际传递参数值，前两个参数是EventObject和Element，第三个是option选项对象
 69         var msg = '<br/>获取选填参数信息：<br/>选填参数个数：' + arguments.length + "<br/>";
 70         for(var i in arguments[2]) {
 71             msg += i + "：" + arguments[2][i] + "<br/>";
 72         }
 73         Ext.Msg.alert('信息', '打印eventTestDiv的信息：<br/><br/>Id：' + this.id
 74             + "<br/>" + msg
 75         );
 76     },eventTestDiv, {
 77         // 事件延迟触发事件
 78         delay : 500,
 79         // 是否只触发一次
 80         single: false,
 81         msg   : '我是追加的参数'
 82     });
 83     /**
 84      事件的几种写法（addListener和on是等价的）：
 85      var fn = function (){
 86          // 这里添加需要处理的逻辑
 87      };
 88     // 第一种写法
 89     button1.addListener("click",fn,button1);
 90     button1.addListener("mouseover",fn,button1);
 91
 92     //第二种写法
 93     button1.on({
 94         click     : fn,
 95         mouseover : fn,
 96         scope     : button1
 97     });
 98
 99     //第三种写法
100     button1.on({
101         click     : {scope:button1, delay:3000, fn:fn},
102         mouseover : {scope:button1, delay:1000, fn:fn}
103     });
104     */
105 })

转载于:https://www.cnblogs.com/sharpest/p/7655519.html

63.ExtJs事件（自定义事件、on、eventManager）示例相关推荐

C#事件-自定义事件
事件有很多,比如说鼠标的事件:MouserMove,MouserDown等. 键盘的事件:KeyUp,KeyDown,KeyPress. 有事件,就会有对事件进行处理的方法,而事件和处理方法之间是怎 ...
html 自动触发事件,js自动触发事件自定义事件
在有些情况下,我们需要程序逻辑自动触发元素的事件,例如js提供了click(), form提供了reset(),submit()等方法!在jquery中提供了trigger()方法帮助我们自动触发事件 ...
观察者模式 - dom事件 / 自定义事件 / Promise 我的理解
观察者模式(Observer) 又称作为发布-订阅模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者对象之间通讯和耦合的问题; 观察者模式例子引用于<JavaScript设计模式> ...
Yii2 事件--自定义事件和系统事件
首先撇开yii,让我们来理解一下js的事件以js的click事件为例--点击按钮时的弹出警告,首先要定义click事件,然后在点击的时候回触发事件,最后是弹出警告. 事件就是这么一个过程. 总结一下 ...
ExtJs之自定义事件
1.新建一个实践类 1 Employee = function(name) 2 { 3 4 this.name = name; 5 6 this.addEvents({ 7 8 "fired ...
在AdMob中介内创建横幅广告自定义事件
一:前提条件 1:将KeyMob与应用集成. 2:您可能还需要先了解发送AdRequest的相关信息以及中介的工作原理. 二:横幅广告自定义事件在以下示例中,您将首先在KeyMob中介内创建一个横幅 ...
【QT】自定义事件 QCustomEvent
[QT]自定义事件一.自定义事件的优势尽管 Qt 已经提供了很多事件,但对于更加千变万化的需求来说,有限的事件都是不够的.例如,我要支持一种新的设备,这个设备提供一种崭新的交互方式,那么,这种事件 ...
JS基础-事件模型(事件事件流自定义事件事件冒泡/代理)
文章目录一.事件与事件流二.事件模型 1.DOM0级模型 2.IE事件模型 3.DOM2级模型 4.DOM3级事件处理方式三.事件对象四.事件绑定与解除 1.事件绑定 1.1对象.on事件名字 ...
Vue学习笔记05 组件的自定义事件-组件通信-$nextTick-脚手架解决ajax跨域-插槽-过渡动画
文章目录 Vue学习笔记05 父组件给子组件传值注意点子组件给父组件传值父组件接受子组件的传值通过函数组件的自定义事件事件绑定的第一种写法 @或v-on 事件绑定的第二种写法:使用ref ...
【就你不知道-Flex 自定义事件-龙骑士之死】（2012-05-25 08:29）
一:目的问:为什么要自定义事件? 答:系统提供事件不能满足. 举例:需要传递参数. 二:背景事件不是鼓励存在的,事件始终是和一个对象相关联的,否则,单独说事件毫无意义. 举例:当英雄血为0时,死亡 ...

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

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

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

63.ExtJs事件（自定义事件、on、eventManager）示例相关推荐

最新文章

热门文章