Javascript bonne pratique - onclick vs discret

Question

dans notre projet actuellement j'ai le problème suivant. Je dois lier quelques clics à une liste d'éléments de verrouillage comme les éléments suivants:

 
    <ul> 
    <li class="listeelement" id="load-content-id-1"><div>listcontent</div></li> 
    <li class="listeelement" id="load-content-id-2"><div>listcontent</div></li> 
    <li class="listeelement" id="load-content-id-3"><div>listcontent</div></li> 
    <li class="listeelement" id="load-content-id-4"><div>listcontent</div></li> 
    </ul> 

Le clic sur .listelement doit envoyer une demande à une action spécifique avec params spécifiques comme l'ID d'élément et quelque chose comme ça (-> module/action? id = 1 & quelque chose = quelque chose).

Je veux écrire une classe de requête générique qui envoie la requête et gère toutes les choses, qui ont à faire avec le clic et la requête et je ne suis pas sûr si c'est un bon moyen de lier le clic nonobstrusif à la classe .listelement et enregistrer l'action et les informations de param dans un balisage OU s'il est préférable de lier le clic par l'onclick = "sendRequest (action, params)". La solution obstrusive-onclick me semble beaucoup plus facile, mais je ne suis pas sûr que ce soit aussi une bonne solution.

Serait heureux si quelqu'un pouvait donner une opinion à ce sujet. Merci.

Answer 1

Je suggère d'utiliser un balisage décent et ne pas compter sur onclick attributs. La plus grande raison serait que cela garde votre balisage propre, et cela réduit également la taille des octets sur le fil si vous avez beaucoup de ces éléments.

En outre, je ne coderais pas les valeurs dans l'attribut id, car vous pouvez désormais utiliser légalement les attributs de données HTML5 et ils sont également rétrocompatibles.

<ul id="container"> 
    <li class=".." data-action="login" data-id="1" data-params="a=b">..</li> 
    <li class=".." data-action="logout" data-id="2" data-params="c=d">..</li> 
    ... 
</ul> 

Une fois que vous avez les données dans le balisage, il est assez simple à configurer les gestionnaires de clic et connectez-vous avec la classe Request.

var list = document.getElementById("container"); 
var items = list.getElementsByTagName("li"); 

for(var i = 0; i < items.length; i++) { 
    items[i].onclick = (function(element) { 
     return function() { 
      var action = element.getAttribute('data-action'); 
      var id = element.getAttribute('data-id'); 
      var params = element.getAttribute('data-params'); 

      sendRequest(action, params); 
     }; 
    })(items[i]); 
} 

Si vous avez un beaucoup de <li> éléments, puis la délégation d'événement peut être une meilleure approche au lieu d'ajouter un gestionnaire pour chaque élément. En outre, envisagez d'utiliser le modèle d'enregistrement d'événement DOM pour ajouter des gestionnaires à la place de la propriété onclick car cela limite les options à un seul gestionnaire.

Answer 2

Voici une option. Faites à la place les liens du li <a> et placez le contrôleur/action comme une chaîne de requête (ou des paires clé-valeur délimitées par des barres obliques si votre back-end peut analyser de jolies URL). En supposant que vous faites un appel AJAX, ayez un javascript simple qui, au chargement de la page, accroche l'événement click pour tous les éléments <a> avec une classe donnée (vous pouvez choisir quelque chose de approprié, comme .ajax-link). Dans le gestionnaire, empêchez l'action par défaut de sorte que le navigateur ne navigue pas vers le href, et cueillez le href, l'analyser, et configurer un xhr avec lui et vous partez. Je ne sais pas si vous utilisez une bibliothèque comme jQuery, mais cela allégerait la charge et le code.

Si vous le souhaitez, vous pouvez imbriquer le <a> dans le <li> existant.

Cela pourrait aider: JQuery parameter injection on bind/click vs. embedded click handlers with parameters