Confronto dell’uso della memoria del browser: onClick in linea rispetto all’utilizzo di JQuery .bind ()

Ho ~ 400 elementi in una pagina che hanno eventi legati ai clic (4 diversi tipi di pulsanti con 100 istanze di ciascuno, eventi di clic di ogni tipo che svolgono la stessa funzione ma con parametri diversi).

Devo minimizzare qualsiasi impatto sulle prestazioni che questo potrebbe avere. Che tipo di prestazioni sto prendendo (memoria, ecc.) Legando gli eventi di clic a ciascuno di questi singolarmente (usando bind() di JQuery)? Sarebbe più efficiente avere un onclick linea chiamando la funzione su ciascun pulsante?

Modifica per chiarimenti :):
In realtà ho una tabella (generata usando JQGrid) e ogni riga ha colonne di dati seguite da 4 colonne di “pulsante” di icone – elimina e altre tre funzioni aziendali che rendono le chiamate AJAX al server:

 | id | descrizione | __more data_ | _X__ | _ + __ | ____ | ____ |
 -------------------------------------------------
 |  1 | ___ dati ____ | ____ dati ____ | icona | icona | icona | icona |  
 |  2 | ___ dati ____ | ____ dati ____ | icona | icona | icona | icona |   
 |  3 | ___ dati ____ | ____ dati ____ | icona | icona | icona | icona |   
 |  4 | ___ dati ____ | ____ dati ____ | icona | icona | icona | icona |    

Sto usando il formattatore personalizzato di JQGrid ( http://www.trirand.com/jqgridwsiki/doku.php?id=wiki:custom_formatter ) per creare l’icona ‘pulsanti’ in ogni riga (non riesco a recuperare il pulsante HTML dal server).

È qui nella mia funzione di formattazione personalizzata che posso facilmente creare l’icona HTML e il codice in un onclick linea chiamando le funzioni appropriate con i parametri appropriati (dati da altre colonne in quella riga). Uso i dati nelle colonne di riga come parametri per le mie funzioni.

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

Quindi, posso pensare a due opzioni:
1) on-line in linea come ho spiegato sopra
–o–
2) delegate() (come menzionato nelle risposte di seguito (grazie mille!))

  1. Costruisci l’immagine dell’icona (ogni tipo di icona ha il suo nome di class) usando il formattatore personalizzato .
  2. Imposta i data() dell’icona data() sui suoi parametri nell’evento JQGrid afterInsertRow.
  3. Applicare il gestore delegate() ai pulsanti di classi specifiche (come detto in precedenza da @KenRedler)
 > $('#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) 

Non sono sicuro di quanto supposto sia l’opzione n. 2 del browser … ma mi piace mantenere il Javascript lontano dai miei elementi DOM 🙂

Perché non è necessaria solo una soluzione generale con alcuni oggetti contenitore, ma la soluzione per jqGrid ti può suggerire in un altro modo.

Il problema è che jqGrid crea già alcuni collegamenti onClick . Quindi non spenderai più risorse se utilizzi solo esistenti nel gestore di eventi jqGrid. Due gestori di eventi possono essere utili per te: onCellSelect e beforeSelectRow . Per avere un comportamento per lo più vicino a quello che hai attualmente ti suggerisco di usare l’ evento beforeSelectRow . Il vantaggio è che se l’utente fa clic su uno dei pulsanti personalizzati, la selezione della riga può rimanere invariata. Con onCellSelect la riga verrà prima selezionata e quindi richiamato il gestore di eventi onCellSelect .

È ansible definire le colonne con pulsanti come segue

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

Nel codice qui sopra uso il formattatore personalizzato di jqGrid, ma senza alcun binding di eventi. Il codice di

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

dove firstButtonColumnIndex = 8 e buttonNames = {8:'Add',9:'Edit',10:'Remove',11:'Details'} . Nel codice è ansible sostituire l’ alert con la chiamata di funzione corrispondente.

Se si desidera selezionare la riga sempre sul pulsante clic, è ansible semplificare il codice fino al seguente

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

Nel modo in cui usi un gestore di eventi click esistente associato all’intera tabella (vedi il codice sorgente ) e dì solo a jqGrid quale handle vuoi usare.

Vi consiglio inoltre di utilizzare sempre gridview:true che velocizza la creazione di jqGrid, ma che non può essere utilizzato se si utilizza la funzione afterInsertRow che si è considerato di utilizzare come opzione.

Puoi vedere la demo qui .

AGGIORNATO : Un’ulteriore opzione che hai è quella di utilizzare formatter:'actions' vedere la demo preparata per la risposta . Se si guarda il codice del formattatore ‘azioni’, funziona in gran parte come il codice corrente se lo si guarda dal lato del binding dell’evento.

AGGIORNATO 2 : la versione aggiornata del codice che puoi vedere qui .

Dovresti utilizzare il metodo .delegate() per associare un singolo gestore di clic per tutti gli elementi, tramite jQuery, a un elemento padre di tutti i pulsanti.

Per i diversi parametri è ansible utilizzare gli attributi data- per ciascun elemento e recuperarli con il metodo .data() .

Hai preso in considerazione l’utilizzo di delegate() ? Avresti un gestore su un elemento contenitore anziché su centinaia. Qualcosa come questo:

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

Supponendo un layout generale come questo: