extjs事件 事件监听 事件委托

原文链接:http://blog.sina.com.cn/s/blog_647a022e01014zzf.html

function handleClick(e){//e是Ext.EventObject

e.preventDefault();

var target = e.getTarget();

}

Ext.EventManager.on('myDiv','click',handleClick)

myDiv.on("click",handleClick)

 

2.减少内存销毁和防止内存泄露的隐患是事件委托的好处，下拉列表和日历拥有一群元素的空间适用委托

 

以装饰作示例：
<ul id='actions'>
<liid='btn-edit'></li>
<liid='btn-delete'></li>
<liid='btn-cancel'></li>
</ul>
不是登记一个处理器而是为逐个列表项（list item）都登记：
Ext.fly('btn-edit').on('click, function(e,t) {
// 执行事件具体过程
});
Ext.fly('btn-delete').on('click, function(e,t) {
// 执行事件具体过程
});
Ext.fly('btn-cancel').on('click, function(e,t) {
// 执行事件具体过程
});
要使用事件委托的方式代替，在容器身上登记一个事件处理器，按照依附的逻辑选择：
Ext.fly('actions').on('click‘, function(e,t) {
switch(t.id) {
case 'btn-edit':
// 处理特定元素的事件具体过程
break;
case 'btn-delete':
// 处理特定元素的事件具体过程
break;
case 'btn-cancel':
// 处理特定元素的事件具体过程
break;
}
});
基于dom各层经过逐层上报的原因，可以说，我们登记了的“actions”的div一定会被访问
得到。这时就是执行我们所指定的switch指令，跳到 对应匹配的元素那部分代码。这样方
法具备可伸缩性，因为我们只要维护一个函数就可以控制那么多的元素的事件。

? 委托化delegate
你在登记事件的处理器的时候可以加入配置这个选项。一个简易选择符，用于过滤目标元
素，或是往下一层查找目标的子孙。
el.on('click', function(e,t) {
// 执行事件具体过程
}, this, {
// 对子孙'clickable'有效
delegate: '.clickable'
});
? 翻转hover
这是一个Ext的翻转菜单的实例：
// handles when the mouse enters the element
function enter(e,t){
t.toggleClass('red');
}
// handles when the mouse leaves the element
function leave(e,t){
t.toggleClass('red');
}
// subscribe to the hover
el.hover(over, out);
? 移除事件句柄removeAllListeners
在该元素身上移除所有已加入的侦听器。
el.removeAllListeners();
? 是否一次性触发single
你在登记事件的处理器的时候可以加入配置这个选项。true代表为事件触发后加入一个下
次移除本身的处理函数。
el.on('click', function(e,t) {
// 执行事件具体过程
}, this, {
single: true // 触发一次后不会再执行事件了
});
? 缓冲buffer
你在登记事件的处理器的时候可以加入配置这个选项。若指定一个毫秒数会把该处理函数
安排到Ext.util.DelayedTask延时之后才执行。如果 事件在那个事件再次触发，则原处理器
句柄将不会被启用，但是新处理器句柄会安排在其位置。
el.on('click', function(e,t) {
// 执行事件具体过程
}, this, {
buffer: 1000 // 重复响应事件以一秒为时间间隔
});
? 延时delay
你在登记事件的处理器的时候可以加入配置这个选项。制定触发事件后处理函数延时执行
的时间。
el.on('click', function(e,t) {
// 执行事件具体过程
}, this, {
// 延迟事件，响应事件后开始计时（这里一秒）
delay: 1000
});
? 目标target
你在登记事件的处理器的时候可以加入配置这个选项。如果你想另外指定另外一个目标元
素，你可以在这个配置项上面设置。这可保证在事件上报阶段中遇到这个元 素才会执行这
个处理函数。
el.on('click', function(e,t) {
// 执行事件具体过程
}, this, {
// 遇到里头的第一个'div'才会触发事件
target: el.up('div')
});