Quelle est la meilleure façon d'ajouter un événement dans le JavaScript?

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

Question

Je vois 2 façons principales pour définir des événements en JavaScript:

  1. Ajouter un événement directement à l'intérieur de la balise comme ceci:

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

  2. Les paramétrer en JavaScript comme ceci:

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

et ajouter un événement dans un <script> la section à l'intérieur de la <head> section ou dans un fichier JavaScript externe, comme ça si vous êtes en utilisant prototypeJS:

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

Je pense que la première méthode est plus facile à lire et à maintenir (parce que l'action JavaScript est directement lié à la le lien), mais il n'est pas si propre (car les utilisateurs peuvent cliquer sur le lien, même si la page n'est pas complètement chargé, ce qui pourrait provoquer des erreurs JavaScript dans certains cas).

La deuxième méthode est plus propre (actions sont ajoutés lorsque la page est complètement chargée), mais il est plus difficile de savoir si une action est liée à la balise.

Quelle méthode est la meilleure?

Un tueur réponse sera pleinement appréciée!

Était-ce utile?

La solution

Dans mon expérience, il y a deux points importants de cette:

1) la chose La plus importante est d'être cohérent.Je ne pense pas que l'une des deux méthodes est nécessairement plus facile à lire, aussi longtemps que vous vous en tenez à elle.Je ne reçois confus quand les deux méthodes sont utilisées dans un projet (ou pire encore, sur la même page) parce que j'ai alors commencer à chercher pour les appels et ne savons pas où regarder.

2) Le second type, c'est à dire Event.observe() a des avantages, si les mêmes ou très proches des mesures sont prises sur plusieurs événements, car cela devient évident lorsque tous ces appels sont dans le même lieu.Aussi, comme Konrad a souligné, dans certains cas, cela peut être manipulé avec un seul appel.

Autres conseils

Je pense que la première méthode est plus facile à lire et à maintenir

J'ai trouvé le contraire pour être vrai.Gardez à l'esprit que, parfois, plus d'un gestionnaire d'événements va être lié à un contrôle donné.

Déclarer tous les événements dans un endroit central permet d'organiser les actions qui ont lieu sur le site.Si vous avez besoin de changer quelque chose que vous n'avez pas à rechercher tous les endroits pour faire un appel à une fonction, il vous suffit de modifier dans un seul endroit.Lors de l'ajout de plus d'éléments que devraient avoir les mêmes fonctionnalités que vous n'avez pas à penser à ajouter des gestionnaires d'eux;au lieu de cela, il suffit souvent de les laisser déclarer une classe, ou même de ne pas les modifier à tout parce qu'ils appartiennent logiquement à un élément conteneur de laquelle tous les éléments d'enfant à être raccordée à une action.À partir d'un code:

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

Cette câblé un gestionnaire d'événements pour tous les en-têtes de colonne dans une table pour faire la table triée.Imaginez l'effort pour rendre tous les en-têtes de colonne triable séparément.

Je crois que la deuxième méthode est généralement préférée parce qu'elle conserve les informations au sujet de l'action (c'est à direle JavaScript qui est distinct de la majoration de la même façon CSS sépare la présentation de balisage.

Je suis d'accord que cela la rend un peu plus difficile de voir ce qui se passe dans votre page, mais ce sont de bons outils comme firebug vous y aide beaucoup.Vous trouverez également beaucoup mieux IDE de soutien disponibles si vous conservez le mélange de HTML et de Javascript à un minimum.

Cette approche prend tout son sens propre que votre projet se développe, et vous trouvez que vous souhaitez joindre les mêmes événements javascript à un tas de différents types d'éléments sur le nombre de pages.Dans ce cas, il devient beaucoup plus facile d'avoir un seul rythme qui s'attache aux événements plutôt que d'avoir à chercher beaucoup de différents fichiers HTML, afin de trouver de même, lorsqu'une fonction est appelée.

Vous pouvez également utiliser la méthode addEventListener (pas sous IE) / attachEvent (dans IE).

Découvrez: http://www.quirksmode.org/js/events_advanced.html

Ceux-ci vous permettent d'attacher une fonction (ou plusieurs fonctions) à un événement sur un objet DOM.Ils ont aussi l'avantage de permettre à l'onu d'attachement plus tard.

En général, si vous utilisez un montant graves de javascript, il peut être utile de faire votre javascript lisible, contrairement à votre html.Donc on peut dire que onclick=X dans le html, c'est très clair, mais c'est à la fois une absence de séparation entre le code -- un autre de dépendance syntaxique entre les pièces, et d'une affaire dans laquelle vous avez à lire à la fois le html et le javascript pour comprendre le comportement dynamique de la page.

Ma préférence personnelle est d'utiliser jQuery externe, fichiers js donc le js est complètement séparée de l'html.Javascript doit être discret afin en ligne (c'est à dire, le premier exemple) n'est pas vraiment le meilleur choix à mon avis.Lorsque l'on regarde le code html, le seul signe que vous êtes en utilisant js doit être le script inclut dans la tête.

Un exemple de fixation (et de traitement) des événements pourrait être quelque chose comme ceci

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

Je pense que cette approche est utile si vous voulez garder tous vos js organisé, comme vous pouvez utiliser des objets spécifiques pour les tâches et tout est bien contenue.

Bien sûr, l'immense avantage de laisser jQuery (ou un autre bien connu de la bibliothèque) de faire le travail, c'est que la croix-prise en charge du navigateur est (largement) de prendre soin de ce qui rend la vie beaucoup plus facile

Les bibliothèques comme YUI et jQuery fournir des méthodes pour ajouter des événements seulement une fois que le DOM est prêt, ce qui peut l'être avant de la fenêtre.onload.Ils s'assurent également que vous pouvez ajouter plusieurs gestionnaires d'événements, de sorte que vous pouvez utiliser des scripts à partir de différentes sources sans les différents gestionnaires d'événements d'écraser les uns les autres.

Si la pratique de votre choix sont;

Un.Si votre script est simple et le seul qui sera exécuté sur la page, créer une fonction init de la sorte:

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

De deux.Si vous avez beaucoup de scripts ou d'un plan de mashup des scripts à partir de différentes sources, utiliser une bibliothèque et de ses onDOMReady méthode à la possibilité d'ajouter vos gestionnaires d'événements

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top