Comparación de uso de la memoria del navegador: on-line onClick vs. using JQuery .bind ()

Tengo ~ 400 elementos en una página que tienen eventos de clic vinculados a ellos (4 tipos diferentes de botones con 100 instancias de cada uno, los eventos de clic de cada uno realizan la misma función pero con diferentes parámetros).

Necesito minimizar cualquier impacto en el rendimiento que esto pueda tener. ¿Qué tipo de rendimiento estoy obteniendo (memoria, etc.) vinculando eventos de clic a cada uno de ellos individualmente (usando el bind() de JQuery bind() )? ¿Sería más eficiente tener un onclick línea llamando a la función en cada botón?

Editar para aclarar :):
De hecho, tengo una tabla (generada usando JQGrid) y cada fila tiene columnas de datos seguidas por 4 columnas de ‘botón’ de icono – eliminar y otras tres funciones comerciales que hacen que las llamadas AJAX vuelvan al servidor:

 | id | descripción | __más datos_ | _X__ | _ + __ | ____ | ____ |
 -------------------------------------------------
 |  1 | ___ datos ____ | ____ datos ____ icono | icono | icono | icono |  
 |  2 | ___ datos ____ | ____ datos ____ icono | icono | icono | icono |   
 |  3 | ___ datos ____ | ____ datos ____ icono | icono | icono | icono |   
 |  4 | ___ datos ____ | ____ datos ____ icono | icono | icono | icono |    

Estoy usando el formateador personalizado de JQGrid ( http://www.trirand.com/jqgridwsiki/doku.php?id=wiki:custom_formatter ) para construir los ‘botones’ del icono en cada fila (no puedo recuperar el botón HTML del servidor).

Es aquí en mi función de formateador personalizado que puedo simplemente construir el icono HTML y el código en un onclick en línea llamando a las funciones apropiadas con los parámetros apropiados (datos de otras columnas en esa fila). Utilizo los datos en las columnas de la fila como parámetros para mis funciones.

  function removeFormatter(cellvalue, options, rowObject) { return ""; } 

Entonces, puedo pensar en dos opciones:
1) onclick línea como expliqué arriba
–o–
2) delegate() (como se menciona en las respuestas a continuación (¡muchas gracias!))

  1. Cree la imagen del icono (cada tipo de icono tiene su propio nombre de clase) utilizando el formateador personalizado .
  2. Establezca los data() del icono data() en sus parámetros en el evento afterInsertRow JQGrid.
  3. Aplicar el controlador delegate() a los botones de clases específicas (como @KenRedler dice a continuación)
 > $('#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) 

No estoy seguro de cómo supongo que la opción de navegador intensivo # 2 … pero me gusta mantener el Javascript lejos de mis elementos DOM 🙂

Debido a que no solo necesita una solución general con algunos objetos contenedores, sino también la solución para jqGrid, puedo sugerirle una forma más.

El problema es que jqGrid ya hace algunos enlaces onClick . Por lo tanto, no gastará más recursos si solo usa existentes en el controlador de eventos jqGrid. Dos controladores de eventos pueden serle útiles: onCellSelect y beforeSelectRow . Para tener un comportamiento principalmente cercano a lo que tienes actualmente, te sugiero que uses el evento beforeSelectRow . La ventaja es que si el usuario hace clic en uno de sus botones personalizados, la selección de fila puede permanecer sin cambios. Con onCellSelect, la fila se seleccionará primero y luego se llamará al controlador de eventos onCellSelect .

Puede definir las columnas con botones como los siguientes

 { name: 'add', width: 18, sortable: false, search: false, formatter:function(){ return "" }} 

En el código anterior uso el formateador personalizado de jqGrid, pero sin ningún enlace de evento. El código de

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

donde firstButtonColumnIndex = 8 y buttonNames = {8:'Add',9:'Edit',10:'Remove',11:'Details'} . En su código, puede reemplazar la alert a la llamada de función correspondiente.

Si desea seleccionar la fila siempre en el clic del botón puede simplificar el código hasta el siguiente

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

En la forma en que utiliza un controlador de evento click existente vinculado a toda la tabla (ver el código fuente ) y simplemente diga jqGrid qué manejador desea usar.

También te recomiendo usar siempre gridview:true que acelera la creación de jqGrid, pero que no se puede usar si afterInsertRow función afterInsertRow que considerabas utilizar como opción.

Puedes ver la demostración aquí .

ACTUALIZADO : Una opción más que tienes es usar formatter:'actions' ver la demostración preparada para la respuesta . Si nos fijamos en el código del formateador de “acciones”, se trabaja principalmente como su código actual si lo mira desde el lado vinculante del evento.

ACTUALIZADO 2 : la versión actualizada del código que puede ver aquí .

Debe usar el método .delegate() para vincular un manejador de un solo clic para todos los elementos, a través de jQuery, a un elemento principal de todos los botones.

Para los diferentes parámetros, puede usar atributos de data- para cada elemento y recuperarlos con el método .data() .

¿Ha considerado usar delegate() ? Tendría un controlador en un elemento contenedor en lugar de cientos. Algo como esto:

 $('#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 ); }); 

Asumiendo un diseño general como este: