`
standalone
  • 浏览: 619365 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

ExtJs Event Delegation

阅读更多
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'
   }
}

分享到:
评论

相关推荐

    Extjs源码之--Ext事件机制/继承关系

    4. **事件委托(Event Delegation)**: EXTJS支持事件委托,允许在父级组件上监听子组件的事件,提高性能。例如,可以监听整个容器的'click'事件,然后根据目标组件来处理: ```javascript Ext.container....

    ExtJS 事件处理 动态载入

    2. **事件委托(Event Delegation)**:在容器组件上设置监听器,通过选择器匹配子组件触发的事件,以减少内存占用和提高性能。例如,监听`itemclick`事件来处理列表中的点击事件: ```javascript var list = Ext....

    ExtJS 3.x中文API

    7. **事件处理(Event Handling)**:事件模型是ExtJS中的一大特色,允许组件之间进行交互。监听器(Listeners)和委托(Delegation)是常用的事件处理方式。 8. **Ajax和JSONP**:ExtJS内置了Ajax请求和JSONP跨域...

    Ext官方PPT,强烈推荐

    - 文件可能还涵盖了高级主题,如事件委托(Event Delegation),它允许在一个容器组件上监听子组件的事件,提高性能。 5. **实际应用** - 在实际开发中,理解并熟练运用这些概念可以极大地提高代码的可维护性和可...

    EXTJS总结.txt

    一、获取元素(Getting Elements) 1.Ext.get var el = Ext.get('myElementId');//获取元素,等同于document.getElementById('...八、事件控制Event Handling 43.addListener/on 为此元素加入一个事件处理函数...

    prototype 开发应用手册,笔记,prototype.js文件下载

    2. Delegation(委托):Prototype的`Event.observe()`方法可以实现事件委托,监听父元素上的事件,处理子元素的行为,减少事件监听器的数量,提高性能。 五、Function增强 1. Function.prototype.bind:这个方法...

Global site tag (gtag.js) - Google Analytics