Associer dynamiquement un évènement a un élément

Bonjour,

J'ai une page qui est composée de plusieurs vues, que l'on peut atteindre de deux manières, par un click ou en scrollant.

L'objectif est de créer un code javascript qui va "écouter" les événements de la page pour déclencher une action, l'affichage de la vue dans la console du navigateur.
Seulement je ne maitrise pas du tout cette partie de javascript.

Le code html :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<ul id="panel-nav" style="margin-top: -145px;"> <li style="cursor: pointer;" class="nav-news"><a data-id="news1" href="#scroll-to-news1" class=""><span>Go to the top</span></a></li> <li class="" style="cursor: pointer;"><a data-id="servicealaclicquot" href="#scroll-to-servicealaclicquot" class="selected"><span>Service à la Clicquot</span></a></li> <li class="" style="cursor: pointer;"><a data-id="naturallyclicquot3" href="#scroll-to-naturallyclicquot3" class=""><span>Naturally Clicquot </span></a></li> <li class="" style="cursor: pointer;"><a data-id="carnet2015" href="#scroll-to-carnet2015" class=""><span>Vendanges Clicquot 2015</span></a></li> <li class="" style="cursor: pointer;"><a data-id="DiscoverWeAreClicquot" href="#scroll-to-DiscoverWeAreClicquot" class=""><span>Découvrez We Are Clicquot</span></a></li> <li class="" style="cursor: pointer;"><a data-id="rich" href="#scroll-to-rich" class=""><span>Veuve Clicquot Rich</span></a></li> <li class="" style="cursor: pointer;"><a data-id="Expression" href="#scroll-to-Expression" class=""><span>Rosé Expression</span></a></li> <li class="" style="cursor: pointer;"><a data-id="ClicquotMail" href="#scroll-to-ClicquotMail" class=""><span>Clicquot Mail</span></a></li> <li class="" style="cursor: pointer;"><a data-id="prix" href="#scroll-to-prix" class=""><span>Le Prix de la femme d'affaires 2014</span></a></li> </ul>

---

Jai créé un premier code javascript qui me premet de récupérer le nom de la vue, mais je dois lancer le code pour que l'action soit effectuée.

code javascript :

Code:

---

1 2 3 4

var a = document.getElementsByClassName("selected"); var child = a [0].firstChild; var txt = child.firstChild.data; console.log(txt);

---

Je pense que pour l'exécution automatique du code à chaque fois que l'utilisateur change de vue par un scroll ou un clic, je dois utiliser l'élément focus et faire appel à la méthode addEventListener.
Seulement je ne sais pas si je suis sur la bonne voie et comment m'y prendre.

Une âme charitable peut elle m'aiguiller s'il vous plaît ?

Hello,

Déjà pour le lancement de ton code je le mettrais dans le onLoad() de ta page. Comme ça dès que ta page est chargé ton script se lance.

Ensuite à l'intérieur je mettrais tous les écouteurs !


Bon courage.

Bonjour,

justement je dois réussir à créer un code qui s'exécute de lui même uniquement quand l'évènement changement de bloc/vue s'effectue par un click ou un scroll sans modifier la partie html.

j'ai créé un deuxième code qui fonctionne à moitié, le voici :

Code:

---

1 2 3 4 5 6 7 8 9

window.nomvue = function () { var a = document.getElementsByClassName("selected"); var child = a [0].firstChild; var txt = child.firstChild.data; console.log(txt); }   window.addEventListener("click", nomvue);

---

il y a deux problèmes premièrement il me donne le nom du bloc/vue au moment du click et non celui qui est actif après le click et ensuite j'aimerais que la fonction se déclenche avec l'évènement click mais aussi le scroll.

Merci d'avance pour votre aide

Bonjour,

J'ai réussis à faire fonctionner comme je le voulais pour le click avec le code suivant :

Code:

---

1 2 3 4 5 6 7 8 9

window.nomvueclick = function () { var a = document.getElementsByClassName("hover"); var b = a [0].firstChild; var c = b.firstChild; var d = c.firstChild.data; console.log(d); } window.addEventListener("click", nomvueclick);

---

Pour le scroll j'ai fais ça :

Code:

---

1 2 3 4 5 6 7 8

window.nomvuescroll = function () { var a = document.getElementsByClassName("selected"); var b = a [0].firstChild; var c = b.firstChild.data; console.log(c); } window.addEventListener("scroll", nomvuescroll);

---

Mais ça ne fonctionne pas.

Quelqu'un pour m'aiguiller s'il vous plait ?

Exemple (l'événement focus se produit avant l'événement click) :

Code:

---

1 2 3 4 5 6 7 8 9 10

var nodes = document.querySelectorAll( "#panel-nav a" );   for ( var i = 0; i < nodes.length; i++ ){ nodes[i].addEventListener( "click", function( e ){ console.log( e.type, e.currentTarget.href, e.currentTarget.dataset.id ); }, false ); nodes[i].addEventListener( "focus", function( e ){ console.log( e.type, e.target, e.currentTarget ); }, false ); }

---

C'est plus simple en jQuery :

Code:

---

1 2 3

$( "a", "#panel-nav" ).on( "click focus", function( e ){ console.log( e.type, e.currentTarget.href, e.currentTarget.dataset.id ); });

---

Bonjour,

Merci pour ta réponse danielhagnoul.
Mais ça ne fais pas exactement ce que je veux.
Premièrement ça ne fonctionne pas pour le scroll, deuxièmement c'est ce qu'il y a dans le span que je veux et non le href ou data-id.

Je vais essayer de réexpliquer mon cas en étant plus clair.

La page en question est composé de plusieurs blocs accessibles soit via un panneau de navigation composé de ronds cliquables soit en scrollant.

Chaque bloc a un nom qui lui correspond, le but du code est d'afficher le nom qui correspond au bloc "actif" ou "choisi" via le lien cliquable ou le scroll et l'affichage du nom du bloc doit se faire dans la console du navigateur via console.log().

Néanmoins je vais essayer d'améliorer / adapter ton code à mes besoins

Bonjour,


Je n'ai toujours pas trouver de solution à mon problème, quelqu'un a t-il une idée pour m'aider à débloquer mon problème s'il vous plait ?

Citation:

---

var c = b.firstChild.data;

---

Code:

---

1 2	var id = b.firstChild.getAttribute('data-id');

---

ou comme dans l'exemple de danielhagnoul avec .dataset