[Résolu] Onclick="..." vs href="javascript:..."

Bonjour

On lit partout qu'il est préférable d'écrire

<img src="..." alt="" onclick="monscript(...)">

plutôt que

<a href="javascript:monscript(...)"><img src="..." alt=""></a>

ce que je comprend aisément et que j'utilise régulièrement depuis longtemps.

Néanmoins il ne semble pas possible d'éviter les href="javascript:..." dans le cas suivant:

<img src="..." alt="" usemap="#Map" onclick="monscript('tout')">
<map name="Map">
    <area shape="RECT" coords="0,0,345,140"
      href="javascript:monscript('gauche')" data-coords="000,000,345,140">
    <area shape="RECT" coords="427,0,999,199"
       href="javascript:monscript('droite')" data-coords="427,000,999,199">
</map>

A ce propos, l'utilisation de "name" au lieu de "id" dans la définition d'une <map> a l'air également "vieux jeu".
Y a-t-il quelque chose que j'ignore dans ce domaine?
Modifié par PapyJP (09 Mar 2017 - 12:05)

Bonjour,

Mon avis sur la question est que l'on peut même s'affranchir de tout JS en ligne dans le html. Je pense qu'il est tout à fait faisable d'utiliser des classes côté html et de placer une écoute dans le gestionnaire d'évènement.

<img src="..." alt="" usemap="#Map" class="JS-monscript JS-monscript-tout">
<map name="Map">
    <area shape="RECT" coords="0,0,345,140"
      href="" data-coords="000,000,345,140" class="JS-monscript JS-monscript-gauche">
    <area shape="RECT" coords="427,0,999,199"
       href="" data-coords="427,000,999,199" class="JS-monscript JS-monscript-droite">
</map>

Ainsi je place une écoute sur tous les éléments contenant la classe JS-monscript,
Au clique sur l'un d'eux, je récupère la seconde classe qui commence par JS-monscript-.
Je segmente ce string pour obtenir la dernière partie.
Enfin j'exécute monscript() avec comme paramètre le segment récupéré précédemment.

Bien sûr il est faisable de n'utiliser qu'une classe dans le html mais ça me paraît plus clair ainsi pour servir d'exemple.

Salut

Je plussois la réponse de Greg.

Dans une logique de développement orientée MVC il est préférable de bien segmenter le code et l'ajout d'une class spécifique, moi je préfixe en JQ , ou un ID géré ensuite par le gestionnaire d'événement est plus souple.

Après pour répondre spécifiquement à la question de Papy, peu importe le onclick ou le href, c'est une question de faisabilité en revanche, pour des questions "de sécurité" il vaut mieux un onclick, le href étant visible dans la barre des tache des navigateurs cela informe directeemnt et sans effort de l'action qui va avoir lieu.

Voilà une approche très intéressante.
J'évite cependant d'utiliser le concept de "gestionnaire d'évènement" pour les pages qui sont destinées à un public large, car je ne sais pas comment faire pour avoir un gestionnaire d'évènements qui fonctionne de la même manière avec IE qu'avec les navigateurs standards.
Auriez vous une référence d'un document clair qui explique ce qu'il convient de faire?

Salut,

Je plussoie également.
Pour la doc : https://www.w3schools.com/js/js_htmldom_eventlistener.asp (je ne sais pas si c'est que les autres ont en tête)

oui laurent c'est ce que j'ai en tête ou avec Jquery

Pareil pour moi également : j'écoute les événements sur les classes, les ID, ou les data-*.
Modifié par Olivier C (10 Mar 2017 - 05:52)

PapyJP a écrit :
Désolé, mais je connais déjà cette page. Je n'y trouve nulle part la moindre mention de ce qu'il convient de faire pour fonctionner de la même façon sur IE et sur les autres navigateurs, ce qui est actuellement ma principale préoccupation.

Et tu l'as lu jusqu'au bout ? Jusqu’à la section "Browser Support" ? Avec cet exemple ci :

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // For all major browsers, except IE 8 and earlier
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // For IE 8 and earlier versions
    x.attachEvent("onclick", myFunction);
}

???
Modifié par _laurent (10 Mar 2017 - 01:33)

Honnettement, en 2017 on peu cracher tant qu'on veut sur jQuery, mais quand il s'agit de rendre un js compatible avec de vieux machins il n'y a pas mieux que cette lib' dont la première raison d'être fût de résoudre les problèmes de compatibilité entre browsers.

@_laurent
C'est sans doute que tu sais comment faire et moi pas.
Chaque fois que je cherche quelque chose sur ce sujet sur Internet, tout ce que je comprends c'est que c'est différent, par exemple comment faire un stopPropagation() sur IE, ou même comment accéder les paramètres "non déclarés" comme "event" ou "this".

Ce que je cherche, et que je n'ai pas (encore) trouvé c'est un document qui me donne un exemple complet. Tout ce que je trouve, c'est la définition de chaque fonction et quelques exemples basiques de son utilisation, mais je n'ai pas de vue cohérente.
C'est la différence entre une documentation, qui décrit chaque fonction indépendamment des autres, et un didacticiel, qui montre sur des exemples un peu moins simplistes que les traditionnels "hello world" comment ça s'utilise.

Coucou Papy ce surnom te va bien (rien de péjoratif) car je retrouve en toi ce côté mal comprenant des anciens (j'ai 48 ans hein )

Bref là tu t'embrouille car tu ne vois pas la simplicité de la chose

Le système d'écoute permet juste de lancer une fonction JS

Si ta fonction est bien faite tu n'as pas spécialement à te préoccuper de la compatibilité.

Concernant l'écoute il n'y a que deux façon d'écouter

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // For all major browsers, except IE 8 and earlier
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // For IE 8 and earlier versions
    x.attachEvent("onclick", myFunction);
}

ici x représente l'élément html avec l'id "myBtn"

ensuite si on est dans les browser/navigateur standard
if (x.addEventListener) {

on écoute l'élément sur l'action "click", l'équivalent d'un onclick directement sur le bouton.

sinon si on trouve attachEvent c'est qu'on est sur IE et là on écoute différemment.

tu vois c'est simple

PS : les jeunot faut savoir expliquer et vulgariser pour que les anciens comprennent

Bon! je vois que je me suis très mal fait comprendre

Premier point: pourquoi Papy? tout simplement parce que je suis un Papy: j'aurai 3/4 de siècles la semaine prochaine et j'ai deux petits enfants, dont un majeur. Et comme de plus ils habitent Strasbourg, ça m'a paru un pseudo approprié pour le site Alsacreations!

Pourquoi je crains pour les utilisateurs de "vieux systèmes"?
Je ne crains rien du tout pour eux, c'est simplement pour expliquer pourquoi je ne peux pas simplement faire du code sans me préoccuper de la compatibilité avec ces "vieux systèmes".

Par ailleurs, je comprends très bien comment marchent les "eventListeners" des navigateurs récents: on définit quelle(s) fonction(s) doi(ven)t être appelée(s) quand un évènement se produit sur un élément donné, ce n'est pas un problème, et j'utilise cette fonctionnalité quand je suis sûr que les utilisateurs sont munis d'un navigateur récent.
Par exemple j'ai fait des outils qui ne sont utilisés que par le propriétaire du site et moi même, et ces outils font largement appel à des gestionnaires d'évènement.

Par contre ce que je n'ai pas bien compris, c'est comment faire des gestionnaires d'évènement qui marchent de la même façon sur IE et sur -- disons -- Chrome ou FireFox.
Il n'y a peut être rien à comprendre, comme vous semblez tous me le dire, mais comme en plus je n'ai pas (plus) de vieil IE sous la main je ne peux même pas tester ça tranquillement, et comme toute ma vie j'ai travaillé dans l'informatique, je sais par expérience qu'un code qu'on n'a pas testé est a priori bogué.

Prenons un exemple très simple, se référant à une question que j'ai récemment posée sur le site et dont je n'ai toujours pas compris les réponses reçues:
J'ai une page qui a -- en gros -- la structure suivante:

<body>
    <figure>
        <img src="...">
        <figcaption>...<figcaption>
    </figure>
</body>

Le CSS est fait de telle sorte que l'image se présente bien centrée sur la page.
Je voudrais ajouter un gestionnaire d'évènements qui fasse que si on clique sur l'image on fasse apparaître une autre image, quand on clique dans <figure> en dehors de l'image il ne se passe rien et quand on clique en dehors de <figure> ça ferme la fenêtre.
Cela passe bien entendu par un gestionnaire d'évènement qui bloque la propagation de l'évènement, car si je ne le fais pas on n'aura pas le temps voir la nouvelle image remplacer la précédente, que la fenêtre sera fermée.
C'est ridicule, mais je ne parviens pas à comprendre comment faire cela de façon à ce que ça marche sous tous les navigateurs.
Pour l'instant, j'en suis donc resté à ne pas fermer la fenêtre quand on clique en dehors de <figure> et à compter sur l'utilisateur pour cliquer non pas n'importe où, mais sur le bouton de fermeture du navigateur.
Ce n'est pas trop gênant sur un ordinateur, mais sur un téléphone ou une tablette c'est une manœuvre plus complexe qu'un simple clic en dehors de l'image.

Je crois que si vous me montrez comment traiter ce problème, je disposerai (enfin!) du "didacticiel" que je cherche.

Merci de votre aide
Modifié par PapyJP (10 Mar 2017 - 15:16)

Merci de vos réponses
Comme on le voit très bien dans la réponse de Seven tears, c'est bien pratiquement à chaque moment qu'on doit se poser la question "est-ce que ma f... fonction est supportée par ce f... navigateur?"

Il en résulte un code incompréhensible, le pompon étant tenu par

function addEvent(el,ev,listener){ // élément, nom de l'événement sans "on", listener
  if(el.addEventListener){
    el.addEventListener(ev,listener);
  } else {
    el.attachEvent("on"+ev, function(){return listener.apply(el, arguments);});
  }
}

Je crois que je vais tout simplement écrire un code qui marche uniquement sur les navigateurs modernes et, en testant sur el.addEventListener, laisser les utilisateurs d'antiquités cliquer sur le bouton de fermeture de la fenêtre.
Après tout, c'est surtout gênant pour les utilisateurs de téléphones et tablettes, et autant que je sache il n'y en a pas qui tournent sous les vieilles versions de IE