Salut,
onclick est un gestionnaire d'événement alors que
click représente l'événement.
Lorsqu'on se sert d'un gestionnaire d'événement, on lance une action alors que l'événement ne lance rien, ce n'est qu'une propriété indiquant le clic de la souris ou la pression sur la touche Entrée, comme l'a précisé clb56. Ceci n'est valable que pour les éléments cliquables. Si par exemple, on parle du
click sur un paragraphe, élément non cliquable d'origine, le
click ne représente que le clic de la souris.
href="javascript:mafonction()"
est à éviter. Il suppose que javascript est activé et n'offre pas d'alternative. On peut s'en servir lorsqu'on crée un lien via JS par exemple et qu'on lui affecte un attribut
href (puisque la création du lien est déjà optionnelle) mais il est préférable de ne pas le mettre dans la partie XHTML afin de ne pas gêner ceux qui ne disposent pas de JS. Cette instruction ne devrait apparaître qu'au sein du code JS.
href="un lien" onclick="maFonction(); return false;"
est déjà préférable puisque, dans le cas où JS n'est pas actif, le lien reste fonctionnel. Maintenant, un
onclick est un attribut qui provient du JS, interprétable en (X)HTML quelquesoit la balise, mais qui sémantiquement parlant, n'apporte rien, au même titre qu'un
id ou une
class. Dans la mesure du possible, il vaut mieux s'en passer en écrivant simplement :
<a href="un lien">texte du lien</a>
tout comme en CSS, où il vaut mieux commencer par accéder directement à la balise
a plutôt que de rajouter systématiquement un
id ou une
class dans la partie (X)HTML.
CSS et JS sont des couches optionnelles. Il serait donc normal qu'elles n'influent pas sur la structure. On le fait plutôt dans un soucis de simplicité. Pour ne pas encombrer le code, il est alors judicieux de se servir des mêmes attributs pour accéder à l'élément que ce soit avec CSS ou JS. C'est possible avec
id et
class mais pas avec
onclick.
C'est donc là qu'intervient le
window.onload, qui charge la surcouche JS au lancement de la page. Plutôt que d'écrire :
<a href="un lien" onclick="maFonction(); return false;">texte du lien</a>
... on laisse le lien tranquille, on crée un fichier JS à part et on accède au lien via la méthode
getElementsByTagName qui renvoie un tableau de l'ensemble des liens du document :
fnInitScript()
{
var oA = document.getElementsByTagName('a')[0];
oA.onclick = maFonction; // on définit l'action
}
maFonction()
{
... // instructions diverses
return false; // On empêche la transmission de l'url au navigateur
}
window.onload = fnInitScript;
Bien entendu, si le lien n'est pas parmi les premiers de la page, on ne va pas s'amuser à compter combien il y en a pour savoir comment renseigner l'ordre dans le tableau.
C'est donc là qu'on ajoute un
id au lien et qu'on remplace la méthode
getElementsByTagName par
getElementById, qui identifie un élément unique :
<a href="un lien" id="func">texte du lien</a>
fnInitScript()
{
var oA = document.getElementById('func');
oA.onclick = maFonction; // on définit l'action
}
maFonction()
{
... // instructions diverses
return false; // On empêche la transmission de l'url au navigateur
}
window.onload = fnInitScript;
Le moindre mal, ici, est qu'on peut se resservir de l'
id via CSS.
Si on évite le onclick par un onload, ça manque de souplesse. On ne peut alors lancer une action qu'au chargement de la page, ce qui n'est pas forcémment ce qu'on recherche. Du coup, pour lancer une action sur l'événement click, on charge le script via le onload et c'est au sein même du script qu'on définit l'action via le gestionnaire d'événement onclick en prenant soin de ne pas transmettre l'url au navigateur ( return false; )
Pour en revenir au this...
JiDai a écrit :
Ca n'empêche que dans ce dernier cas, le this pointe vers la location du lien et j'aimerais bien savoir comment a partir de ce this pointer vers son élément a 
this pointe l'objet a et non sa "localisation". Dans le cas d'un lien, cet objet possède des propriétés dont l'url de l'élément, obtenue par this.href.
@chmel : Je te réponds par MP afin de ne pas pertuber le fil de la discussion... Rien de bien méchant.
Modifié par koala64 (04 Nov 2006 - 08:15)
Avec eval, tu demandes au navigateur d'éxécuter le code rentré par l'utilisateur... Je te laisse imaginer la suite... 