jQuery.cliquez sur la (les) vs onClick
J'ai un énorme jQuery application, et je suis en utilisant le ci-dessous deux méthodes pour cliquez sur événements.
Première méthode
HTML
<div id="myDiv">Some Content</div>
jQuery
$('#myDiv').click(function(){
//Some code
});
Deuxième méthode
HTML
<div id="myDiv" onClick="divFunction()">Some Content</div>
Appel de fonction JavaScript
function divFunction(){
//Some code
}
J'utilise soit la première ou la deuxième méthode dans mon application. Lequel est le mieux? Mieux pour la performance? Et standard?
- Vous pouvez en apprendre davantage sur les différentes façons de joindre les gestionnaires d'événements et de leurs avantages/inconvénients ici: quirksmode.org/js/introevents.html. jQuery est juste une belle wrapper pour l'avancée de l'enregistrement d'un événement.
- N'oubliez pas de mettre la fonction de clic à l'intérieur de l' $(document).ready(function().
Vous devez vous connecter pour publier un commentaire.
À l'aide de
$('#myDiv').click(function(){
est mieux comme il suit d'événement standard d'enregistrement de modèle. (jQuery en interne utiliseaddEventListener
etattachEvent
).Essentiellement de l'enregistrement d'un événement dans d'une façon moderne est le discrète façon de gérer des événements. Également à inscrire plus d'un écouteur d'événement pour la cible, vous pouvez appeler
addEventListener()
pour la même cible.http://jsfiddle.net/aj55x/1/
Plus Moderne d'inscription à un événement -> http://www.quirksmode.org/js/events_advanced.html
D'autres méthodes telles que la définition de l' Attributs HTML, exemple:
Ou DOM des propriétés des éléments, exemple:
sont vieux et ils peuvent être écrites plus facilement.
Attribut HTML devrait être évité car Il rend le balisage plus gros et moins lisible. Les préoccupations de contenu/structure et le comportement ne sont pas bien séparées, faire un bug en plus difficile à trouver.
Le problème avec le élément du DOM des propriétés méthode est qu'un seul gestionnaire d'événement peut être lié à un élément par événement.
Plus Traditionnelle de la gestion des événements -> http://www.quirksmode.org/js/events_tradmod.html
MDN Référence: https://developer.mozilla.org/en-US/docs/DOM/event
$('#myDiv').click(function(){
le premier code, puis de générer des 20 lignes de HTML dynamiquement à partir de JavaScript et chaque ligne a un bouton qui lorsqu'il est cliqué, le JavaScript est requis pour exécuter la même fonction. Si vous le faites en premier, alors il ne fonctionnera pas tant que le gestionnaire d'événement a été ajouté avant le HTML a été généré. Il semble plus facile de simplement jeter dans leonclick="functionName()"
dans le HTML générées dynamiquement puis le bouton fonctionne tout de suite. Ou connaissez-vous une solution plus élégante de cette situation?.delegate()
fonction. Il s'attache cas de tout élément qui va apparaître dans le futur sur le site..live()
fonction pourrait être une solution plus simple pour ce que vous êtes après http://api.jquery.com/live/. Un bon article sur les différences entre.bind()
,.live()
et.delegate()
ici.delegate
pour les versions plus anciennes ou utiliser les.on
pour les nouvelles versions de jQuery.$('#myTable').find('tr').click(
ou$('.someclass').parent().click(
- mais ceux sont de mauvais codage styles.jQuery('#container').on('click','.listitem', function(){...})
ou dans la plaine, javascript, jeu dedocument.getElementById('container').addEventListener(...
et vérifierevent.target.getAttribute('class')
dans l'écouteur.data-param="value"
ouonClick="function(param)"
, de toute façon ils sont visibles et peuvent être remplacés. Je suis l'aide de onClick, mais j'ai toujours de vérifier et de nettoyer tout avant de traiter les données, de sorte qu'il n'est pas question pour moi de fi les paramètres sont visibles.id
à tous mes elelements. Aussi, l'AMOUR des réponses qui disent "doit être évitée parce que ses mal"Pour de meilleures performances, utilisez le JavaScript natif. Pour un développement plus rapide, utiliser jQuery. Vérifiez la comparaison des performances à jQuery vs Élément naturel de la Performance.
J'ai fait un test dans Firefox 16.0 32 bits sur Windows Server 2008 R2 /7 64-bit
Pour cliquez sur événements, consultez Natif du Navigateur d'événements vs jquery déclencheur ou jQuery vs Natif Cliquez sur l'Événement de Liaison.
Tests en Chrome 22.0.1229.79 32 bits sur Windows Server 2008 R2 /7 64-bit
De ce que je comprends, votre question n'est pas vraiment sur l'opportunité d'utiliser jQuery ou pas. C'est plutôt: Est-il préférable de lier les événements inline HTML ou par l'intermédiaire d'écouteurs d'événement?
Inline liaison est obsolète. En outre, de cette façon, vous pouvez lier une fonction à un certain événement.
Donc je recommande d'utiliser des écouteurs d'événement. De cette façon, vous serez capable de se lier à de nombreuses fonctions pour un seul événement et de séparer plus tard si nécessaire. Considérer cette pure code JavaScript:
Cela fonctionne dans la plupart des navigateurs modernes.
Toutefois, si vous avez déjà inclure jQuery dans votre projet — il suffit d'utiliser jQuery:
.on
ou.click
fonction.handler1
renvoie une erreur,handler2
ethandler3
ne sera jamais appelée. En outre, vous n'êtes pas en mesure d'ajouter dynamiquement et de retirer certaines fonctions de l'auditeur. Et le dernier mais non le moindre,handler1
,handler2
ethandler3
être déclarés dans la portée mondiale qui est de l'odeur.try..catch
dans les fonctions ne fonctionnent pas lorsquehandler2
non défini. Pour info JavaScript en ligne de toute évidence ne fonctionne pas lorsque le JS est désactivé dans le navigateur de l'utilisateur, s'il vous plaît ne pas désinformer les autres.addEventListener
. Maintenir le bon code!Vous pouvez combiner entre eux, l'utilisation de jQuery pour lier la fonction du clic
$('#myDiv').click
est mieux, parce qu'il sépare du code JavaScript à partir de HTML. Il faut essayer de garder la page de comportement et de structure différentes. Cela aide beaucoup.Aller pour cela, il vous donnera à la fois la norme et de la performance.
Que la deuxième méthode est simple code JavaScript et est plus rapide que celui de jQuery. Mais ici, les performances seront à peu près le même.
À mon humble avis, onclick est la méthode préférée plus .cliquez sur uniquement lorsque les conditions suivantes sont remplies:
J'ai formé cette opinion en raison du fait que les moteurs JavaScript sur les appareils mobiles sont 4 à 7 fois plus lents que leurs homologues de bureau qui ont été faites dans la même génération. Je déteste quand je visite un site sur mon appareil mobile et de recevoir de nervosité défilement parce que le jQuery est la liaison de tous les événements au détriment de mon expérience d'utilisateur et de vie de la batterie. Un autre facteur de soutien, bien que cela ne devrait être une préoccupation avec des organismes gouvernementaux 😉 , nous avons eu IE7 pop-up avec une boîte de message indiquant que le JavaScript processus est long...attendre ou annuler le processus. Ce qui s'est passé à chaque fois il y avait beaucoup d'éléments pour se lier à la via jQuery.
Différence dans les œuvres. Si vous l'utilisez cliquez sur(), vous pouvez ajouter plusieurs fonctions, mais si vous utilisez un attribut, une seule fonction sera exécutée - le dernier.
DÉMO
HTML
JavaScript
Si nous parlons de la performance, en tout cas directement à l'aide est toujours plus rapide, mais à l'aide d'un attribut, vous serez en mesure d'attribuer une seule fonction.
Séparation des préoccupations est la clé ici, et donc la liaison des événements est la méthode généralement acceptée. C'est en gros ce que beaucoup de l'existant, des réponses ont dit.
Cependant ne jetez pas l'idée de balisage déclaratif trop rapidement. Il a sa place, et avec des frameworks comme Angularjs, est la pièce maîtresse.
Il doit y avoir une compréhension de ce que l'ensemble de la
<div id="myDiv" onClick="divFunction()">Some Content</div>
a été couvert de honte si lourdement parce qu'il a été abusé par certains développeurs. Si l'on atteint le point de sacrilège proportions, un peu commetables
. Certains développeurs fait évitertables
pour des données tabulaires. C'est le parfait exemple de personnes qui agissent sans comprendre.J'aime bien l'idée de garder mon comportement séparé de mon point de vue. Je ne vois pas de problème avec le balisage déclarant ce il n' (pas comment il le fait, c'est le comportement). Il pourrait être sous la forme d'un attribut onClick, ou un attribut personnalisé, un peu comme s'amorce composants javascript.
De cette façon, en jetant un coup d'oeil juste au balisage, vous pouvez voir ce qui est fait, au lieu d'essayer de recherche inversée d'événements javascript liants.
Donc, comme une alternative à la ci-dessus, à l'aide d'attributs de données de declarativly annoncer le comportement au sein de la balise. Le comportement est gardé hors de la vue, mais un coup d'œil vous pouvez voir ce qui se passe.
Bootstrap exemple:
Source: http://getbootstrap.com/javascript/#popovers
Note Le principal inconvénient avec le deuxième exemple est celui de la pollution de l'espace de noms global. Cela peut être contourné par l'utilisation de la troisième alternative ci-dessus, ou cadres comme Angulaire et leur ng-cliquez sur attributs automatiquement portée.
Ni l'un est mieux en ce qu'ils peuvent être utilisés à différentes fins.
onClick
(qui devrait en fait êtreonclick
) effectue très légèrement mieux, mais j'en doute fortement, vous remarquerez une différence.Il est intéressant de noter qu'ils font des choses différentes:
.click
peut être lié à tout jQuery collection alors queonclick
doit être utilisé en ligne sur les éléments que vous voulez qu'il soit lié. Vous pouvez également lier un seul événement à l'aide deonclick
, alors que.click
vous permet de continuer à lier les événements.À mon avis, je voudrais être conformes à ce sujet et il suffit d'utiliser
.click
partout et garder tous de mon code JavaScript ensemble et séparées l'une de l'HTML.Ne pas utiliser
onclick
. Il n'y a pas de raison de l'utiliser, sauf si vous savez ce que vous faites, et vous n'avez probablement pas..click
n'était pas mieux queonclick
("Ni l'un est mieux",) il était implicite queonclick
est presque, ou une manière d'écrire du code, alors qu'en fait,.click
est la meilleure pratique par un mile. Désolé, mais à mon humble avis, vous devriez reformuler votre réponseonclick, onmouseover, onmouseout, etc. les événements sont en fait mauvais pour la performance (en Internet Explorer principalement, allez comprendre). Si vous le code à l'aide Visual Studio, lorsque vous exécutez une page avec ces, chacune de ces créera un bloc de SCRIPT de prendre de la mémoire, et donc ralentir les performances.
Ne pas mentionner que vous devriez avoir un la séparation des préoccupations: JavaScript et des dispositions doivent être séparés!
Il est toujours préférable de créer evenHandlers pour l'un de ces événements, un événement peut capturer des centaines/milliers d'articles, au lieu de créer des milliers de séparer les blocs de script pour chacun!
(Aussi, tout ce que tout le monde est en train de dire.)
Bien, l'une des principales idées derrière jQuery est de séparer le code JavaScript de la méchante HTML code. La première méthode est la voie à suivre.
La plupart du temps, natif JavaScript méthodes sont un meilleur choix sur jQuery lorsque la performance est le seul critère, mais jQuery rend l'utilisation de JavaScript et de développement tout à fait facile. Vous pouvez utiliser jQuery comme il ne se dégrade pas les performances de trop. Dans votre cas particulier, la différence de performance est ignorable.
La première méthode d'utilisation de
onclick
n'est pas jQuery mais simplement en Javascript, donc vous n'obtenez pas la surcharge de jQuery. Le jQuery façon peuvent élargi via les sélecteurs si vous avez besoin de l'ajouter à d'autres éléments, sans l'ajout du gestionnaire d'événement pour chaque élément, mais comme vous l'avez maintenant, c'est juste une question si vous avez besoin d'utiliser jQuery ou pas.Personnellement, depuis que vous êtes à l'aide de jQuery, je voudrais rester avec elle car il est cohérent et ne se découpler le balisage à partir du script.
document.querySelector('#something').addEventListener(...
ou similaires dans la plaine du Javascript, donc ce n'est pas le point. De même, vous pouvez attraper des événements de propagation à partir des nœuds enfants en Javascript, et pas seulement avec jQuery raccourcis. Le cœur de la question est, ces activités doivent être dans le controller (javascript comportement des définitions de fichier) plutôt que la affichage (dispersés ici et là dans le code html, des variables-fonctions ou, pire encore, de code en ligne.)La première méthode est à préférer. Il utilise le avancée de l'enregistrement d'un événement de modèle[s], ce qui signifie que vous pouvez attacher plusieurs gestionnaires pour le même élément. Vous pouvez facilement accéder à l'objet de l'événement, et le gestionnaire peuvent vivre dans n'importe quelle fonction de la portée. Aussi, il est dynamique, j'.e elle peut être invoquée à tout moment et est particulièrement bien adapté pour les générées dynamiquement des éléments. Si vous utilisez jQuery, une autre bibliothèque ou le natif de méthodes directement, n'a pas vraiment d'importance.
La deuxième méthode, la mise en cache des attributs, a besoin de beaucoup de fonctions globales (qui mène à la pollution de l'espace de noms) et mélange le contenu/structure (HTML) avec le comportement (JavaScript). Ne pas l'utiliser.
Votre question au sujet de la performance ou les normes ne peuvent pas être facile de répondre. Les deux méthodes sont juste complètement différent, et faire des choses différentes. Le premier est plus puissant, tandis que la seconde est méprisé (considérée comme un mauvais style).
Onclick Fonction Jquery
$('#selector').click(function(){
//Your Functionality
});