Quali sono i vantaggi e/o le insidie ​​nel chiamare una funzione direttamente da un tag di ancoraggio o creare un carico di eventi?

Question

Esiste un modo corretto/standard?

<a href="#" onclick="function();">Link</a> 

vs

<script> 
$(document).ready(function(){ 
    $('#link1').click(function(){ ... }); 
}); 
</script> 
<a href="#" id="link1">Link</a> 

Answer 1

Personalmente preferisco la seconda. Mi permette di separare il mio markup e script. Ciò significa che gli script possono essere inseriti in un file separato e dal momento che gli script sono risorse statiche che vengono memorizzati nella cache, minificati, offuscati, ... E le dimensioni del markup ridotte ovviamente riducono la larghezza di banda e il caricamento più veloce del sito. In una pagina web ci sono davvero 3 nozioni che non deve essere mescolato:

• markup
• scripting
• styling

Answer 2

Dalla cima della mia testa:

1. Il il primo consente un solo gestore per volta su un singolo elemento
2. Il primo ca nnot non ha accesso ad altro che all'ambito globale
3. Il primo non consente la delega degli eventi, poiché alcuni eventi devono utilizzare l'acquisizione degli eventi nei browser conformi agli standard affinché la delega funzioni (ovvero sfocatura e messa a fuoco) e non è possibile selezionare usare la cattura o bolla lì.
4. Il primo ... leggi la risposta di DarinDimitrov.

Si userebbe il primo quando ... chiedi a facebook o hotmail. Non ho niente su questo.

Answer 3

mio 2c:

Al giorno d'oggi, con l'avvento di uso pesante di Ajax e la versatilità di jQuery, mi piace centralizzare la gestione di elaborazione.

Il

<a href='#' onClick= ...></a> 

non necessario richiede l'href. Su questo, io stesso, evito lo stress extra ogni volta che non è necessario. Quindi non codice href su ancore che si risolvono in onClick. In secondo luogo, a meno che non abbia un bisogno speciale di gestire le ancore (come $ ('a ...) ....), non uso nemmeno le ancore. Io uso semplicemente div div o span o addirittura paragrafo (< p>).

l'a (ancora) consente il cursore automatico: puntatore e gestione della decorazione del testo per ancore.

Il

$(document).ready(function() { 
    $('#link').click(... 

è un buon modo per centralizzare l'elaborazione dove è possibile avere tutte le voci documentato proprio lì:

function a() { .. } 
function b() { .. } 
function c() { .. } 
.... 

$(document).ready(function() { 
    // originated on thatfile.html 
    $('#clicka').click(a()); 
    // originated on thisfile.asp 
    $('#clickb').click(b()); 
    // originated on form c in file myforms.asp 
    $('#clickc').click(c()); 
});