Qual è il modo migliore per aggiungere un evento in JavaScript?

StackOverflow https://stackoverflow.com/questions/34126

Domanda

Vedo 2 modi principali per impostare eventi in JavaScript:

  1. Aggiungi un evento direttamente all'interno del tag in questo modo:

    <a href="" onclick="doFoo()">do foo</a>

  2. Impostali tramite JavaScript in questo modo:

    <a id="bar" href="">do bar</a>

e aggiungi un evento in a <script> sezione all'interno del <head> o in un file JavaScript esterno, come quello se stai utilizzando prototipoJS:

Event.observe(window, 'load', function() {
    $('bar').observe('click', doBar);
}

Penso che il primo metodo sia più semplice da leggere e gestire (perché l'azione JavaScript è direttamente collegata al collegamento) ma non è così pulito (perché gli utenti possono fare clic sul collegamento anche se la pagina non è completamente caricata, il che potrebbe causare errori JavaScript in alcuni casi).

Il secondo metodo è più pulito (le azioni vengono aggiunte quando la pagina è completamente caricata) ma è più difficile sapere se un'azione è collegata al tag.

Quale metodo è il migliore?

Una risposta killer sarà pienamente apprezzata!

È stato utile?

Soluzione

Nella mia esperienza, ci sono due punti principali a questo riguardo:

1) La cosa più importante è essere costanti.Non penso che nessuno dei due metodi sia necessariamente più facile da leggere, a patto che ci si attenga.Mi confondo solo quando in un progetto vengono utilizzati entrambi i metodi (o peggio ancora nella stessa pagina) perché poi devo iniziare a cercare i bandi e non so subito dove cercare.

2) Il secondo tipo, cioè Event.observe() presenta vantaggi quando viene intrapresa la stessa azione o un'azione molto simile su più eventi perché ciò diventa ovvio quando tutte le chiamate si trovano nello stesso posto.Inoltre, come ha sottolineato Konrad, in alcuni casi questo può essere gestito con una sola chiamata.

Altri suggerimenti

Penso che il primo metodo sia più facile da leggere e mantenere

Ho scoperto che è vero il contrario.Tieni presente che a volte più di un gestore di eventi sarà associato a un dato controllo.

Dichiarare tutti gli eventi in un unico posto centrale aiuta a organizzare le azioni che si svolgono sul sito.Se hai bisogno di cambiare qualcosa non devi cercare tutti i posti chiamando una funzione, devi semplicemente cambiarla in un posto.Quando aggiungi più elementi che dovrebbero avere la stessa funzionalità non devi ricordarti di aggiungere loro i gestori;invece, spesso è sufficiente lasciare che dichiarino una classe, o addirittura non modificarle affatto perché appartengono logicamente a un elemento contenitore di cui tutti gli elementi figlio sono collegati a un'azione.Da un codice reale:

$$('#itemlist table th > a').invoke('observe', 'click', performSort);

Ciò ha collegato un gestore eventi a tutte le intestazioni di colonna in una tabella per rendere la tabella ordinabile.Immagina lo sforzo di rendere tutte le intestazioni di colonna ordinabili separatamente.

Credo che il secondo metodo sia generalmente preferito perché conserva le informazioni sull'azione (ad es.il JavaScript) separati dal markup nello stesso modo in cui i CSS separano la presentazione dal markup.

Sono d'accordo che questo renda un po' più difficile vedere cosa sta succedendo nella tua pagina, ma buoni strumenti come firebug ti aiuteranno molto in questo.Troverai anche un supporto IDE molto migliore disponibile se mantieni al minimo la combinazione di HTML e Javascript.

Questo approccio diventa davvero unico man mano che il tuo progetto cresce e scopri di voler allegare lo stesso evento JavaScript a una serie di tipi di elementi diversi su molte pagine diverse.In tal caso, diventa molto più semplice avere un unico ritmo che alleghi gli eventi, piuttosto che dover cercare in molti file HTML diversi per trovare dove viene chiamata una particolare funzione.

Puoi anche utilizzare addEventListener (non in IE) / attachEvent (in IE).

Guardare: http://www.quirksmode.org/js/events_advanced.html

Questi ti consentono di allegare una funzione (o più funzioni) a un evento su un oggetto DOM esistente.Hanno anche il vantaggio di consentire il distacco successivo.

In generale, se stai utilizzando una notevole quantità di Javascript, può essere utile creare il tuo file javascript leggibile, al contrario del tuo html.Quindi potresti dirlo onclick=X nell'html è molto chiaro, ma si tratta sia di una mancanza di separazione del codice -- un'altra dipendenza sintattica tra i pezzi -- sia di un caso in cui devi leggere sia l'html che il javascript per comprendere il comportamento dinamico della pagina .

La mia preferenza personale è utilizzare jQuery in file js esterni in modo che js sia completamente separato dall'html.Javascript dovrebbe essere discreto, quindi in linea (cioè il primo esempio) non è proprio la scelta migliore secondo me.Quando guardi l'HTML, l'unico segno che stai utilizzando js dovrebbe essere lo script incluso nell'intestazione.

Un esempio di allegare (e gestire) eventi potrebbe essere qualcosa di simile

var myObject = {

    allLinkElements: null,  

    init: function()
    {
        // Set all the elements we need
        myObject.setElements();

        // Set event handlers for elements
        myObject.setEventHandlers();
    },

    clickedLink: function()
    {
        // Handle the click event
        alert('you clicked a link');
    },

    setElements: function()
    {
        // Find all <a> tags on the page
        myObject.allLinkElements = $('a');

        // Find other elements...
    },

    setEventHandlers: function()
    {
        // Loop through each link
        myObject.allLinkElements.each(function(id)
        {   
            // Assign the handler for the click event
            $(this).click(myObject.clickedLink);
        });

        // Assign handlers for other elements...
    }
}

// Wait for the DOM to be ready before initialising
$(document).ready(myObject.init);

Penso che questo approccio sia utile se vuoi mantenere tutti i tuoi js organizzati, poiché puoi utilizzare oggetti specifici per le attività e tutto è ben contenuto.

Naturalmente, l'enorme vantaggio di lasciare che jQuery (o un'altra libreria ben nota) faccia il duro lavoro è che il supporto multibrowser è (in gran parte) curato, il che rende la vita molto più semplice

Librerie come YUI e jQuery forniscono metodi per aggiungere eventi solo una volta che il DOM è pronto, ovvero prima di window.onload.Garantiscono inoltre la possibilità di aggiungere più gestori eventi in modo da poter utilizzare script da origini diverse senza che i diversi gestori eventi si sovrascrivano a vicenda.

Quindi le tue scelte pratiche sono;

Uno.Se il tuo script è semplice e l'unico che verrà mai eseguito sulla pagina, crea una funzione init in questo modo:

window.onload = function () {
    init();
}
function init() {
    // actual function calls go here
    doFoo();
}

Due.Se disponi di molti script o prevedi di mashup di script da fonti diverse, utilizza una libreria e la sua onDOMReady metodo per aggiungere in modo sicuro i gestori di eventi

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top