ExtJs Event Delegation

本文探讨了事件处理器可能导致内存泄漏的问题,并介绍了一种通过事件委托来优化性能的方法。该方法仅需在一个父元素上设置事件监听器,利用事件冒泡机制处理子元素的事件,从而减少事件处理器的数量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Event handlers are a common cause of memory leaks and can cause performance degradation when not managed carefully. The more event handlers we create the more likely we are to introduce such problems, so we should try to avoid creating huge numbers of handlers when we don't have to.

Event delegation is a technique where a single event handler is created on a parent element, which leverages the fact that the browser will bubble any events raised on one of its children to this parent element. If the target of the original event matches the delegate's selector then it will execute the event handler, otherwise nothing will happen.

This means that instead of attaching an event handler to each individual child element, we only have to create a single handler on the parent element and then, within the handler, query which child element was actually clicked, and react appropriately.

Example:

<div id='mydiv'>
<li>1</li>
<li>2</li>
<li>3</li>
</div>


Attach an event handler to the list's click event and specify we want to delegate
this event to the list items (that is LI tags), by passing a configuration object to
the on method's fourth argument, containing the delegate property:


Ext.get('mydiv').on('click', function(e, target, options){
alert(target.innerHtml);
}, this, {
delegate: 'li'
}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值