[Résolu] Au clic d'un lien

Bonjour,
J'ai une question un peu bête, mais je n'arrive pas à détecter le clic d'un lien (a) en JS natif. Comment faut-il faire ?
J'ai essayé

document.querySelector("a").addEventListener("click",function(){})

et

document.getElementsByTagName("a").addEventListener("click",function(){})

(qui détectent que le premier lien), ainsi que

document.getElementsByTagName("a").onclick=function(){}

qui ne et

document.getElementsByTagName("a").onclick=alert()

qui se lancent au démarrage de la page.
Mais je n'ai peut-être pas bien écrit quelque chose...

Est-on obligé de faire une boucle ?

Merci de votre aide !
Modifié par js_html (13 Feb 2021 - 18:44)

Salut,

document.querySelector("a").addEventListener("click",function(){})

Fonctionne bien : https://jsfiddle.net/undless/yb0ufzam/

Les getElementsByXXX ont un "s" à "élément" c'est une piste
Ils te renvoient une array donc tu ne peux pas mettre directement les choses comme ça. Soit tu le parcours en entier avec une boucle soit tu en prend un en particulier ex pour le premier rencontré :

document.getElementsByTagName("a")[0].addEventListener("click",function(){});

Sinon tu as le getElementById() qui ne va retourner qu'un élément (un id c'est unique et il n'y a pas de "s" ) https://www.w3schools.com/jsref/met_document_getelementbyid.asp

Bonne soirée !

js_html a écrit :

Petite question bonus : Si l'on veut faire avec "document.querySelector", il faut faire une boucle aussi ?

Non , mais seul le premier élément trouvé correspondant au sélecteur sera traité.

Pour traité tous les liens, il te faut utiliser document.querySelectorAll('a') et il te faudra une boucle pour les traiter un à un.
voici un exemple simple : https://jsfiddle.net/s8vko0aw/
code de base:

for (let e of document.querySelectorAll('a')) {
  e.addEventListener('click', function() {
    // action a effectuer au click
  })
}

Donc, document.querySelectorAll("a") et document.getElementsByTagName("a"), c'est exactement la même chose ?

js_html a écrit :
Merci Laurent Dufour !

On se connait ?

js_html a écrit :
Oui, j'ai bien mis le S à getElementsByTagName.

Oui je sais, j'ai pas dit que tu l'avais oublié. C'est une astuce pour savoir si ca ne te renvoi qu'un élément ou plusieurs.
Modifié par _laurent (13 Feb 2021 - 22:46)

js_html a écrit :
Donc, document.querySelectorAll("a") et document.getElementsByTagName("a"), c'est exactement la même chose ?

non , https://developer.mozilla.org/fr/docs/Web/API/Document/querySelectorAll

autre exemple simple : https://jsfiddle.net/gh9ozjtd/

for (let e of document.querySelectorAll('nav a, p a')) {
  e.addEventListener('click', function() {
    // action a déclencher au click
  })
}

Bonne journée
Modifié par gcyrillus (14 Feb 2021 - 07:32)

_laurent a écrit :
Oui je sais, j'ai pas dit que tu l'avais oublié. C'est une astuce pour savoir si ca ne te renvoi qu'un élément ou plusieurs.

Oui, oui, je te prévenais seulement que ça n'était pas ça.

js_html a écrit :
Donc, document.querySelectorAll("a") et document.getElementsByTagName("a"), c'est exactement la même chose ?

Je me réexplique : "Je sais que querySelectorAll et getElementsByTagName sont différents, mais les deux codes suivants sont-ils les mêmes : document.querySelectorAll("a") et document.getElementsByTagName("a") ?"

En jQuery,

$("").click(function(){})

, c'est la même chose que

for (var i of document.querySelectorAll("")) {
  i.addEventListener("click", function() {
  })
}

? C'est ceci ?

Merci !

D'accord, merci !