Jqgrid 浏览器内存使用情况比较：内联onClick与使用JQuery.bind（）

我在一个页面上有大约400个元素，这些元素都有点击事件（4种不同类型的按钮，每个按钮有100个实例，每种类型的点击事件执行相同的功能，但参数不同）

我需要将这可能对性能造成的任何影响降至最低。通过将单击事件分别绑定到这些事件中的每一个（使用JQuery的

bind（）

），我受到了什么样的性能影响（内存等）？使用内联

onclick

调用每个按钮上的函数会更有效吗

编辑以澄清：）：
实际上，我有一个表（使用JQGrid生成），每一行都有数据列，后跟4个图标“button”列-delete&其他三个业务函数，它们使AJAX调用返回服务器：

|id|description|__more data_|_X__|_+__|____|____| ------------------------------------------------- | 1|___data____|____data____|icon|icon|icon|icon| | 2|___data____|____data____|icon|icon|icon|icon| | 3|___data____|____data____|icon|icon|icon|icon| | 4|___data____|____data____|icon|icon|icon|icon| 因此，我可以想到两种选择：
1） 内联

onclick

，正如我上面解释的
--或者--
2）

delegate（）

（如以下答案所述（非常感谢！））

使用.

将图标的

数据（）

设置为JQGrid事件中的参数，构建图标图像（每个图标类型都有自己的类名）

将

委托（）

处理程序应用于特定类的按钮（如下@KenRedler所述）

我不确定浏览器密集型选项#2是什么，我想……但我喜欢让Javascript远离我的DOM元素：）

您应该使用该方法通过jQuery将所有元素的单击处理程序绑定到所有按钮的父元素

对于不同的参数，您可以对每个元素使用

数据-

属性，并使用该方法检索它们。

您考虑过使用吗？容器元素上只有一个处理程序，而不是数百个。大概是这样的：

$('#container').delegate('.your_buttons','click',function(e){
  e.preventDefault();
  var your_param = $(this).data('something'); // store your params in data, perhaps
  do_something_with( your_param );
});

<div id="container">
  <!--- stuff here --->
  <a class="your_buttons" href="#" data-something="foo">Alpha</a>
  <a class="your_buttons" href="#" data-something="bar">Beta</a>
  <a class="your_buttons" href="#" data-something="baz">Gamma</a>
  <a class="something-else" href="#" data-something="baz">Omega</a>
  <!--- hundreds more --->
</div>

假设总体布局如下：

$('#container').delegate('.your_buttons','click',function(e){
  e.preventDefault();
  var your_param = $(this).data('something'); // store your params in data, perhaps
  do_something_with( your_param );
});

<div id="container">
  <!--- stuff here --->
  <a class="your_buttons" href="#" data-something="foo">Alpha</a>
  <a class="your_buttons" href="#" data-something="bar">Beta</a>
  <a class="your_buttons" href="#" data-something="baz">Gamma</a>
  <a class="something-else" href="#" data-something="baz">Omega</a>
  <!--- hundreds more --->
</div>

---

因为您不仅需要一些容器对象的通用解决方案，还需要jqGrid的解决方案，我可以向您推荐另外一种方法

问题是jqGrid已经进行了一些

onClick

绑定。所以，如果只使用jqGrid事件处理程序中现有的事件处理程序，您将不会花费更多资源。两个事件处理程序可能对您有用：和。为了让你的行为和你现在的行为更接近，我建议你使用event。它的优点是，如果用户单击自定义按钮中的一个，行选择可以保持不变。使用时，将首先选择行，然后调用事件处理程序

您可以使用如下按钮定义列

{ name: 'add', width: 18, sortable: false, search: false,
  formatter:function(){
      return "<span class='ui-icon ui-icon-plus'></span>"
  }}

onCellSelect: function (rowid,iCol/*,cellcontent,e*/) {
    if (iCol >= firstButtonColumnIndex) {
        alert("rowid="+rowid+"\nButton name: "+buttonNames[iCol]);
    }
}

其中

firstbuttoncolumnidex=8

和

buttonNames={8:'Add'，9:'Edit'，10:'Remove'，11:'Details'}

。在代码中，您可以将

警报

替换为相应的函数调用

如果你想选择行总是在按钮上点击你可以简化代码直到下面

{ name: 'add', width: 18, sortable: false, search: false,
  formatter:function(){
      return "<span class='ui-icon ui-icon-plus'></span>"
  }}

onCellSelect: function (rowid,iCol/*,cellcontent,e*/) {
    if (iCol >= firstButtonColumnIndex) {
        alert("rowid="+rowid+"\nButton name: "+buttonNames[iCol]);
    }
}

按照使用一个现有的

的方式，单击绑定到整个表的事件处理程序（请参阅），只需说出要使用的jqGrid

我建议您另外始终使用
gridview:true
，它可以加快jqGrid的构建，但如果您使用您认为用作选项的
afterInsertRow
函数，则不能使用它

你可以看到演示

已更新：您还有一个选择，就是使用
格式化程序：'actions'
请参阅准备就绪。如果从事件绑定的角度来看，“操作”格式化程序的代码，它的工作方式与当前代码基本相同

更新2：您可以看到的代码的更新版本。
+1但是，最密集的部分是生成所有这些按钮并将其插入DOM，他不应该在按钮插入DOM之前将单击处理程序绑定到按钮吗？@motionman，我假设这些元素是在服务器端创建的，而不是通过javascript动态创建的。关于绑定处理程序，不需要。整个委托点不必绑定到每个元素，而是绑定那些将由于冒泡而获得事件的元素的父元素。因此，单个绑定将处理所有单击（即使它们是在绑定之后添加的，因为绑定发生在另一个元素上）。@motionman-我澄清了上面的问题，非常感谢您的输入！我确实使用Javascript动态创建元素。@icats您应该看看答案。事件委派是这里唯一合理的解决方案。非常感谢@KenRedler
delegate（）
和
data（）
——我不知道这些，觉得很傻。我在上面的问题中添加了澄清-
delegete（）
如果我设置正确，它看起来对我很有用，但我不太确定如何最有效地实现我需要做的事情。@icats:我也这么认为，并在写下你问题的答案后写下了答案。非常感谢！！！你的回答非常简洁，而且很有帮助。我非常感谢演示！！！正如您在回答上述问题时所提到的，“操作”自定义格式类型似乎并不完全完整/文档化：“格式化程序只是实验性的，将在下一版本中描述”。我期待下一次JQGrid发布！因此，我将使用您上面概述的“beforeSelectRow”事件处理程序方法。这是完美的，非常简单！我想我在盒子里想得太多了：）。而且，你给JQGrid团队的建议非常完美。那会很方便的！