浏览器内存使用情况比较:内联onClick与使用JQuery .bind()

本文介绍了浏览器内存使用情况比较:内联onClick与使用JQuery .bind()的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在页面上有约400个元素，这些元素具有关联的单击事件(4种不同类型的按钮，每个按钮具有100个实例，每种类型的单击事件执行相同的功能，但参数不同).

I have ~400 elements on a page that have click events tied to them (4 different types of buttons with 100 instances of each, each type's click events performing the same function but with different parameters).

我需要最大程度地减少对性能的影响.通过将单击事件分别绑定到每个事件(使用JQuery的bind())，我会获得什么样的性能提升(内存等)?内联onclick而是在每个按钮上调用该函数会更有效吗?

I need to minimize any impacts on performance that this may have. What kind of performance hit am I taking (memory etc) by binding click events to each of these individually (using JQuery's bind())? Would it be more efficient to have an inline onclick calling the function on each button instead?

进行澄清:)
我实际上有一个表(使用JQGrid生成)，每行都有数据列，其后是4个图标按钮"列-delete&使AJAX回调到服务器的其他三个业务功能:

Edit for clarification :):
I actually have a table (generated using JQGrid) and each row has data columns followed by 4 icon 'button' columns- delete & three other business functions that make AJAX calls back to the server:


|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|

我正在使用JQGrid的自定义格式化程序( http://www.trirand .com/jqgridwsiki/doku.php?id = wiki:custom_formatter )在每行中构建图标按钮"(我无法从服务器检索按钮HTML).

I am using JQGrid's custom formatter (http://www.trirand.com/jqgridwsiki/doku.php?id=wiki:custom_formatter) to build the icon 'buttons' in each row (I cannot retrieve button HTML from server).

在我的自定义格式化程序函数中，我可以轻松地在内联onclick中构建图标HTML和代码，并使用适当的参数(该行其他列的数据)调用适当的函数.我将行列中的数据用作函数的参数.

It is here in my custom formatter function that I can easily just build the icon HTML and code in an inline onclick calling the appropriate functions with the appropriate parameters (data from other columns in that row). I use the data in the row columns as parameters for my functions.

    function removeFormatter(cellvalue, options, rowObject) {       
        return "<img src='img/favoritesAdd.gif' onclick='remove(\"" + options.rowId + "\")' title='Remove' style='cursor:pointer' />";
    }

因此，我可以想到两种选择:
1)如上文所述，内联onclick
-或-
2)delegate()(如下面的答案所述(非常感谢！)

So, I can think of two options:
1) inline onclick as I explained above
--or--
2) delegate() (as mentioned in below answers (thank you so much!))

使用自定义格式程序.
在data()设置为其参数. ?id = wiki:events"rel =" noreferrer> afterInsertRow JQGrid事件.
将delegate()处理程序应用于特定类的按钮(如下@KenRedler所述)

Build the icon image (each icon type has its own class name) using the custom formatter.
Set the icon's data() to its parameters in the afterInsertRow JQGrid event.
Apply the delegate() handler to buttons of specific classes (as @KenRedler said below)

>    $('#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 );  
>    }); //(code snippet via @KenRedler)

我不确定我猜想浏览器选项2的程度如何...但是我确实喜欢让Javascript远离我的DOM元素:)

I'm not sure how browser-intensive option #2 is I guess...but I do like keeping the Javascript away from my DOM elements :)

推荐答案

因为您不仅需要带有一些容器对象的常规解决方案，而且还需要jqGrid的解决方案，我可以为您提供另一种方法.

Because you need not only a general solution with some container objects, but the solution for jqGrid I can suggest you one more way.

问题是jqGrid已经建立了一些onClick绑定.因此，如果仅使用jqGrid事件处理程序中的现有资源，则不会花费更多资源.以下两个事件处理程序可能对您有用: onCellSelect 和 beforeSelectRow .要使大多数行为与您当前拥有的行为保持亲密关系，建议您使用 beforeSelectRow 事件.这样做的好处是，如果用户从您的自定义按钮上单击一个，则行选择可以保持不变.使用 onCellSelect 时，将首先选择该行，然后调用 onCellSelect 事件处理程序.

The problem is that jqGrid make already some onClick bindings. So you will not spend more resources if you just use existing in jqGrid event handler. Two event handler can be useful for you: onCellSelect and beforeSelectRow. To have mostly close behavior to what you currently have I suggest you to use beforeSelectRow event. It's advantage is that if the user will click on one from your custom buttons the row selection can stay unchanged. With the onCellSelect the row will be first selected and then the onCellSelect event handler called.

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

You can define the columns with buttons like following

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

在上面的代码中，我确实使用了jqGrid的自定义格式化程序，但是没有任何事件绑定.

In the code above I do use custom formatter of jqGrid, but without any event binding. The code of

beforeSelectRow: function (rowid, e) {
    var iCol = $.jgrid.getCellIndex(e.target);
    if (iCol >= firstButtonColumnIndex) {
        alert("rowid="+rowid+"\nButton name: "+buttonNames[iCol]);
    }

    // prevent row selection if one click on the button
    return (iCol >= firstButtonColumnIndex)? false: true;
}

其中firstButtonColumnIndex = 8和buttonNames = {8:'Add',9:'Edit',10:'Remove',11:'Details'}.在您的代码中，您可以将alert替换为相应的函数调用.

where firstButtonColumnIndex = 8 and buttonNames = {8:'Add',9:'Edit',10:'Remove',11:'Details'}. In your code you can replace the alert to the corresponding function call.

如果要始终选择按钮上的行，则可以简化代码，直到执行以下操作

If you want select the row always on the button click you can simplify the code till the following

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

使用绑定到整个表的一个现有 click事件处理程序的方式(请参见源代码)，然后说出要使用的句柄jqGrid.

In the way you use one existing click event handler bound to the whole table (see the source code) and just say jqGrid which handle you want to use.

我还建议您始终使用gridview:true来加快jqGrid的构建速度，但是如果您使用被视为选项的afterInsertRow函数，则不能使用它.

I recommend you additionally always use gridview:true which speed up the building of jqGrid, but which can not be used if you use afterInsertRow function which you considered to use as an option.

您可以在此处观看演示.

已更新:您还有一个选择是使用formatter:'actions'，请参见演示为答案做好了准备.如果您从事件绑定方面看，动作"格式化程序的代码的工作原理与当前代码非常相似.

UPDATED: One more option which you have is to use formatter:'actions' see the demo prepared for the answer. If you look at the code of the 'actions' formatter is work mostly like your current code if you look at it from the event binding side.

更新2 :您可以查看.

这篇关于浏览器内存使用情况比较:内联onClick与使用JQuery .bind()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！