现在的位置: 首页 > 综合 > 正文

ExtJS Performance – Element click events

2013年09月17日 ⁄ 综合 ⁄ 共 1740字 ⁄ 字号 评论关闭

this article from    http://www.jasonclawson.com/2008/05/29/extjs-performance-element-click-events/

 

    今天在ExtJS论坛上讨论怎么样给从服务端返回的许多链接绑定事件监听器时出现了一个问题。给每一个链接绑定一个事件监听器,正确?错误!在这种情境之下是错误的它浪费了没有必要的系统资源。你能想像出当你给TreePanel的每个单节点元素绑定一个click事件监听器时TreePanel要消耗多少资源吗?噢 等等... 这有可能在之此前你这样做过:-). 

   click事件监听器实际上是通过TreeEventModel绑定到TreePanel元素。因此 在整颗树上只有一个click事件监听器。在浏览器中能出现这种不可思议的事情,是由于dom中事件冒泡。因此当你单击TreePanel中树结点的时候click事件将会一直向上冒泡直至被document body上注册的click事件监听器捕获。

   查找触发了click事件的元素 

 你可能感到好奇怎么样才能找到触发了click事件元素。Ext可以很清轻地做到这一点。下面是例子

   html 代码

   

   javascript代码

     

getTarget函数在EventObject中定义。你可能会发现,当你单击某些元素时修改getTarget并没有返回你所要想要的这取决于HTML 的结构。如果一个img 元素嵌套在 a元素之中将可能返回img元素的引用而不是a元素。你应该怎么做呢?

 javascript 代码

   

通过使用Ext.Element的"up"方法我们可以使用css 选择器找到所需要的父结点元素

 

Corresponding Record Reference

 如果每一个a元素包含一条记录。How do you determine which anchor matches up to which record when clicked.让我们重新建一个页面使用TreeEventModel来处理这种情况,当你生成html元素,you should add an attribute to each indicating the record id it is paired to.

 

 html 代码

   

 

javascript 代码

 

Conslusion

If you are doing work generating html with records you should probably look into using the Ext.DataView. It will do the record targeting for you. However, the technique I describe is very useful in a variety of situations. I use it for my breadcrumb toolbar to detect clicks on each breadcrumb link.

 

翻译得乌七八糟,只可意会不可言传,建议直接看原文

 

抱歉!评论已关闭.