J'ai une énorme application jQuery, et j'utilise les deux méthodes ci-dessous pour les événements de clic.
Première méthode
<div id="myDiv">Some Content</div>
$('#myDiv').click(function(){
//Some code
});
Seconde méthode
<div id="myDiv" onClick="divFunction()">Some Content</div>
function divFunction(){
//Some code
}
J'utilise la première ou la deuxième méthode dans mon application. Laquelle est la meilleure ? Meilleure pour les performances ? Et pour la norme ?
L'utilisation de $('#myDiv' ;).click(function(){
est meilleure car elle suit le modèle standard d'enregistrement des événements. (jQuery en interne utilise [addEventListener
][2] et [attachEvent
][3]).
En fait, l'enregistrement d'un événement de manière [moderne][4] est la manière [discrète][5] de gérer les événements. Pour enregistrer plus d'un écouteur d'événement pour une cible, vous pouvez appeler addEventListener()
pour la même cible.
var myEl = document.getElementById('myelement');
myEl.addEventListener('click', function() {
alert('Hello world');
}, false);
myEl.addEventListener('click', function() {
alert('Hello world again!!!');
}, false);
[Pourquoi utiliser addEventListener ?][6] (De MDN)
addEventListener est le moyen d'enregistrer un écouteur d'événement comme spécifié dans le DOM du W3C. dans le W3C DOM. Ses avantages sont les suivants :
- Il permet d'ajouter plus d'un seul gestionnaire pour un événement. Ceci est particulièrement utile pour les librairies DHTML ou les extensions Mozilla qui doivent fonctionner correctement même si d'autres bibliothèques/extensions sont utilisées. Il vous permet de contrôler plus finement la phase d'activation de l'écouteur (capture ou bulle).
- Il fonctionne sur n'importe quel élément DOM, pas seulement les éléments HTML.
En savoir plus sur l'enregistrement moderne des événements -> http://www.quirksmode.org/js/events_advanced.html
D'autres méthodes telles que la définition des [attributs HTML][7], par exemple :
<button onclick="alert('Hello world!')">
Ou les [propriétés des éléments DOM][8], par exemple :
myEl.onclick = function(event){alert('Hello world');};
sont anciennes et peuvent être facilement surchargées.
L'attribut HTML devrait être évité car il rend le balisage plus gros et moins lisible. Les préoccupations relatives au contenu/structure et au comportement ne sont pas bien séparées, ce qui rend un bogue plus difficile à trouver.
Le problème de la méthode DOM element properties est qu'un seul gestionnaire d'événement peut être lié à un élément par événement.
En savoir plus sur le traitement traditionnel des événements -> http://www.quirksmode.org/js/events_tradmod.html
Référence MDN : https://developer.mozilla.org/en-US/docs/DOM/event
[2] : https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener [3] : http://msdn.microsoft.com/en-us/library/ie/ms536343%28v=vs.85%29.aspx [4] : http://www.quirksmode.org/js/events_advanced.html [5] : http://en.wikipedia.org/wiki/Unobtrusive_JavaScript [6] : https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener#Why_use_addEventListener.3F [7] : https://developer.mozilla.org/en-US/docs/DOM/event#HTML_attribute [8] : https://developer.mozilla.org/en-US/docs/DOM/event#DOM_element_properties
La première méthode est à privilégier. Elle utilise le [modèle[s] avancé[s] d'enregistrement des événements] (http://www.quirksmode.org/js/events_advanced.html), ce qui signifie que vous pouvez attacher plusieurs gestionnaires au même élément. Vous pouvez facilement accéder à l'objet événement, et le gestionnaire peut se trouver dans la portée de n'importe quelle fonction. De plus, il est dynamique, c'est-à-dire qu'il peut être invoqué à tout moment et qu'il est particulièrement bien adapté aux éléments générés dynamiquement. Que vous utilisiez jQuery, une autre bibliothèque ou les méthodes natives directement n'a pas vraiment d'importance.
La deuxième méthode, qui utilise des attributs en ligne, nécessite beaucoup de fonctions globales (ce qui entraîne une pollution de l'espace de noms) et mélange le contenu/structure (HTML) avec le comportement (JavaScript). Ne l'utilisez pas.
Il n’est pas facile de répondre à votre question sur les performances ou les normes. Les deux méthodes sont tout simplement complètement différentes, et font des choses différentes. La première est plus puissante, tandis que la seconde est méprisée (considérée comme un mauvais style).