Générer un événement

Version imprimable

Bonjour, je suis en train de me battre pour générer un évènement et je vois pas où ça pêche...
Le but étant au clic de générer un "yes" tout simplement et je vois pas pourquoi ça ne fonctionne pas ...
Qui pourrait regarder et me dire où est mon erreur ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE> <HTML> <HEAD> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" href="style.css" type="text/css"> </HEAD> <body> <button id="test1">Try it !!</button> <script type="text/javascript"> function hello() {alert('Yes !!!!'); } function remp() {var moi=document.getElementById("test1"); moi.addEventListener('onclick', hello, false);} </script> </body> </HTML>
Merci
Cdt
Squeek

06/06/2015, 13h31
NoSmoking

Bonjour,
tout cela est très bien mais à quel moment appelles tu ta fonction remp() ?
09/06/2015, 08h56
Bovino

Code:

moi.addEventListener('onclick', hello, false);

:nono: onclick n'est pas un événement valide dans ce cas là :

Code:

moi.addEventListener('click', hello, false);
09/06/2015, 22h56
squeek

Bonsoir je viens de faire les corrections et ça ne fonctionne toujours pas !

Je comprends pas trop d'ailleurs le fait d'appeller la fonction, sur les quelques exemples que j'ai pu voir il ne demande jamais un appel de fonction, pourriez-vous m'éclairez ?
10/06/2015, 02h28
Watilin

Citation:

Envoyé par squeek

Je comprends pas trop d'ailleurs le fait d'appeller la fonction, sur les quelques exemples que j'ai pu voir il ne demande jamais un appel de fonction

En effet, pour reprendre l'exemple de ton code, il ne demande jamais l'appel de la fonction hello. C'est la magie des gestionnaires d'évènements, et je ne choisis pas ce mot par hasard : ça paraît vraiment magique quand on débute.

Tout d'abord corrigeons les mots que tu as employés dans le titre de ce topic : « générer un évènement ». Ce n'est pas toi qui génères l'évènement, c'est la mécanique interne du navigateur. Ce que tu fais toi, c'est inscrire un gestionnaire (listener) d'évènement. Un gestionnaire d'évènement c'est juste une fonction. Ta fonction hello est un gestionnaire d'évènement. Quand tu appelles addEventListener, tu dis au navigateur « je voudrais que tu écoutes (listen) les évènements de tel type, et quand il y en a un tu appelles telle fonction ». C'est donc le navigateur qui appelle ta fonction.

Voici ce qui se passe dans ton code : dans la fonction remp, tu inscris hello comme gestionnaire d'évènement. Cependant, la fonction remp n'est jamais appelée. Donc le gestionnaire hello n'est jamais inscrit.

Merci !!

Je viens de comprendre mon erreur, il suffissait d'appeller la fonction ainsi.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE>
<HTML>
<HEAD>
    <meta charset="utf-8">
    <title>test</title>
 
 
    </HEAD>
<body>
    <button onload="remp();" id="test1">Try it !!</button>
      <script type="text/javascript">
    function hello() 
        {alert('Yes !!!!');
        }
    function remp()
        {var moi=document.getElementById("test1");
         moi.addEventListener('click', hello, false);}
    window.onload= remp;
 
 
    </script>
       </body>
</HTML>

10/06/2015, 18h24
Watilin

En effet ;)

Pour aller plus loin au sujet des évènements load, quelques remarques :

– Les <button> ne lancent jamais d'évènement load, donc ton attribut onload="remp()" ne sert à rien.

– Les seuls éléments qui lancent un évènement load sont ceux qui utilisent le réseau pour obtenir des données, il y a donc naturellement les objets window et document ainsi que le <body>, mais aussi les <img> et les objets inclus tels que les <iframe> et aussi (je crois) <object>.

– Le tuto que tu suis parle du DOM niveau 0 ; window.onload en fait partie. Utilise de préférence l'équivalent DOM niveau 2, surtout pour l'évènement load car il est courant que tu aies besoin de cet évènement à plusieurs endroits dans ton script (toi-même ou des bibliothèques tierces que tu utilises).

– L'évènement DOMContentLoaded (sur l'objet document) est une alternative intéressante à load : ce dernier n'est lancé que quand toutes les ressources de la page (les éléments qui lancent eux-mêmes des load) ont fini de charger, ce qui peut prendre du temps. À l'inverse, DOMContentLoaded est lancé dès que la structure HTML de la page a été analysée et l'arbre DOM construit. Si tu tires parti de cet évènement, tes scripts peuvent commencer à agir pendant que les ressources externes terminent leur chargement, et ta page donne une plus grande impression de rapidité, même si par exemple elle inclut des images lourdes.