11522 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Alors je pose cette question, auparavant j'ai cherché si ce sujet existe déjà, mais il me semble ne pas avoir trouvée de réponse.

Je souhaiterai savoir si il est possible de connaitre les éléments qui prennent le focus, ou le survole de souris.
souvent dans le code on trouve :

var element= document.getElementById("id");
element.addEventListener("mouseover", function( ) {}); et ca doit être définit pour tous les éléments auxquels on veut effectuer une tache

ceci implique de lancer une fonction sur un élément donné, dont on connait l'id et auquel on attribut une fonction a exécuter.

ce que je souhaite, c'est partout ou la souris se déplace, connaitre l'id d'un élément survolé par la souris ou prenant le focus.
genre : "document.idelementPrenantleFocus" est me retourner un id (par exemple) et à partir de là exécuter une fonction.
Car si j'ai 50 éléments dans une page, il faudrait par le code ci-dessous, creer un event élément par élément.

Cela permet de prendre connaissance de l'id ayant pris le focus, et si ce dernier fait partie d'une liste d’élément devant faire une action par ce survole, exécuter une fonction.

Merci par avance de votre aide.
Tu peux faire cela en Jquery

$( "MONELEMENT" ).mouseover(function() {
  console.log(this.id);
});


Où "MONELEMENT" est ton type d’éléments que tu veux survolé.
Par exemple si tu que le console log s'applique à tous les éléments "lien" alors

$( "a" ).mouseover(function() {
  console.log(this.id);
});
Meilleure solution
Merci beaucoup c'est exactement ce que je cherchais comme solution! Smiley biggrin Smiley biggrin
Modifié par stephd (14 Feb 2019 - 13:21)
bonjour
je me permet une autre solution sans jquery
sur les events du DOM il existe un truc qui s'appelle le bubbling, qui s'active avec le troisième paramètre de la fonction addEventListener (useCapture).


window.addEventListener('mouseover', function(e){
    console.log(e.target);
}, true);

window.addEventListener('focus', function(e){
    console.log(e.target);
}, true);


a+
Modifié par paodao (14 Feb 2019 - 14:04)