Partage

addeventlistener

<< 1 2

Sujet résolu

lifaon74

1 septembre 2010 à 19:53:22

ben t'utilise ma technique et hop réglé en 2s

Almandin

1 septembre 2010 à 20:04:03

ta technique ne peut pas etre implantée dans mon projet désolé

nightmat

2 septembre 2010 à 14:25:36

Il faut que tu apprennes à te servir de la doc et des outils de debuggage javascript ; tout au moins les rapports d'erreur.
removeEventListener() n'a pas besoin de paramètre.

Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.

HerrRox

2 septembre 2010 à 15:46:41

Citation : nightmat

removeEventListener() n'a pas besoin de paramètre.

Bien sur que removeEventListener() a besoin de parametres ...
Tu devrais aussi lire la doc nightmat : removeEventListener

Almandin

2 septembre 2010 à 15:56:31

j'ai lu la doc, et j'ai compris que removeeventlistener necessitait les memes parametres que addeventlistener, et pourtant ça ne marche pas

HerrRox

2 septembre 2010 à 15:59:47

Change ta fonction passerelle

Citation : HerrRox

function passerelle(event)
{
		setTimeout(function(){document.body.addEventListener('click', action, false)},100);
}

A_T_J

2 septembre 2010 à 17:14:23

Bonjour,

j'ai lu la plupart des réponses de ces gens se prétendant connaisseurs, je leur dis BRAVO!

je sais qu'ils ont déjà proposé différentes façons d'écrire ton code, mais je te conseil la suivante (celle ci est la plus utilisée par les développeurs qui ne se la pètent pas ;-) ):

<html>
<head>
	<title>3 etapes !</title>
</head>
<body>
	<!-- Tes balises HTML ici -->

	<script type="text/javascript">
	/*
		ton code javascript ici. comme ça tu n'aura pas à écrire:
		window.onload = function(){}
		et ton code sera beaucoup plus lisible.
	*/
	</script>
</body>
</html>

voici donc ton code que j'ai réécrit d'une façon plus lisible:

<html>
<head>
   <title>3 etapes !</title>
</head>
<body>

   <a href="#" id="bloc">test</a>

   <script type="text/javascript">
   var e1, e2;
   
   
   bloc = document.getElementById('bloc');
   bloc.addEventListener('click', clickOnBlocHandler, false);
   
   function clickOnBlocHandler (event) {
      e1 = event;
      console.log("from the Click on the Bloc");
      //alert("from the Click on the Bloc");
      bloc.removeEventListener('click', clickOnBlocHandler, false);
       setTimeout(function(){
      document.body.addEventListener('click', clickOnBodyHandler, false)
       },100);
   }
   
   function clickOnBodyHandler (event) {
      e2 = event;
      console.log("from the Click on the Body");
      //alert("from the Click on the Bloc");
      document.body.removeEventListener('click', clickOnBodyHandler, false);
      bloc.addEventListener('click', clickOnBlocHandler, false);
   }
   
   </script>
</body>
</html>

lifaon74

2 septembre 2010 à 17:18:11

en attendant le mien tient en beaucoup moins de lignes....

Almandin

2 septembre 2010 à 17:23:08

edit : j'ai rien dit ça marche tres bien ! je vais voir si je peut l'implémenter dans mon projet proprement et je revient poster des nouvelles

edit :

bon ba c'est impeccable, je vais un peu plus décortiquer le code pour le comprendre, mais sinon problème résolu !

HerrRox

2 septembre 2010 à 17:41:42

Almandin : le code de A_T_J n'est pas cross-browser (addEventListener ne marche pas sur IE, il faut utiliser attachEvent -- IE est utilise par 30% des internautes, il n'est donc pas a neglige --).

Donc fait attention ...

Almandin

2 septembre 2010 à 17:44:21

exact, ça sera pour plus tard, je me contente de faire marcher mon site en local

A_T_J

2 septembre 2010 à 17:56:02

Citation : HerrRox

Almandin : le code de A_T_J n'est pas cross-browser

j'allais le lui dire mais après avoir lu tous les posts j'ai fini par oublier

voici suit un hack javascript (ou une fonction cross-brower) qui s'occupera à ta place de tester s'il s'agit de IE et d'utiliser les fonctions qu'il faut pour ça:

var addEvent = (function( window, document ) {
   if ( document.addEventListener ) {
      return function( elem, type, cb ) {
         if ( (elem && !elem.length) || elem === window ) {
            elem.addEventListener(type, cb, false );
         }
         else if ( elem && elem.length ) {
            var len = elem.length;
            for ( var i = 0; i < len; i++ ) {
               addEvent( elem[i], type, cb );
            }
         }
      };
   }
   else if ( document.attachEvent ) {
      return function ( elem, type, cb ) {
         if ( (elem && !elem.length) || elem === window ) {
            elem.attachEvent( 'on' + type, function() { return cb.call(elem, window.event) } );
         }
         else if ( elem.length ) {
            var len = elem.length;
            for ( var i = 0; i < len; i++ ) {
               addEvent( elem[i], type, cb );
            }
         }
      };
   }
})( this, document );


// Example d'utilisation
var lis = document.getElementsByTagName('li');
addEvent( window, 'click', function() {
   this.style.border = '1px solid red';

});

Almandin

2 septembre 2010 à 18:05:13

je verrai plus tard j'ai dit, je ferais moi même la fonction, le but etant de comprendre mon code est de le coder moi même

merci quand même

Almandin

3 septembre 2010 à 19:13:18

je revient poster un dernier problème mwhouéhéhé

voila, j'aimerais avoir plusieurs lien, tout en utilisant les fonction clickonblock et body handler
pour l'instant le code ne permet qu'un seul lien, je n'arrive pas a trouver de solution

merci d'avance !

Anonyme

3 septembre 2010 à 20:27:53

Elle a l'air un peu tordue ta fonction A_T_J o_O

Pour ma part, je fais comme ça :

function addEvent(obj, eventName, fn) {
	if (obj.addEventListener){
		obj.addEventListener(eventName, fn, false);
	} else if (obj.attachEvent){
		obj.attachEvent('on'+eventName, function(e){ return fn.call(obj, e); });
	}
}

Pour en revenir au problème énoncé par Almandin, ceci ne pourrait-il pas faire l'affaire ?

addEvent(window, 'load', function(){
	var compteur = 0;
	addEvent(document.getElementById('element'), 'click', function(){
		compteur++;
		if (compteur%2 == 0) {
			// ici l'action
		}
	});
});

Almandin

4 septembre 2010 à 19:15:29

tu peut me donner plus de précisions sur le fonctionnement du code stp ?
sur chaque lien j'appelle la fonction addevent c'est ça ? mais je ne comprend pas tres bien tout les parametres

merci en tout cas !

Almandin

5 septembre 2010 à 22:18:41

up ! j'aimerais bien un peu d'aide

je rappelle le problème : la technique d'A_T_J marche tres bien mais je ne peut mettre qu'un seul lien, j'aimerais de l'aide pour trouver une solution pour pouvoir utiliser les fonctions avec plusieurs liens :/

merci beaucoup !

Nek'

6 septembre 2010 à 4:41:02

Il faut que tu y ailles à coup de boucle.
getElementsByTagName() pourra t'aider, tu peux aussi regarder du côté de className

.
Tu places tes éléments dans un tableau pour ne pas avoir a refaire la boucle systématiquement (économie de ressources!).

Bon courage.

PS: ne dénigre pas les autres A_T_J s'il te plait, la propagation des évènements c'est un truc chelou de toutes façons :lol:

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

Almandin

6 septembre 2010 à 19:47:33

j'ai encore pas compris

a coup de boucle ? mais il n'est pas possible avec sa technique d'utiliser plusieurs lien, comment je peut me débrouiller ? T_T

Nek'

6 septembre 2010 à 20:58:23

Bah tu bind tes liens dans une boucle

.
Tu n'est pas obligé de sélectionner tes éléments par l'id. http://www.siteduzero.com/tutoriel-3-8 [...] ets-html.html

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

Almandin

6 septembre 2010 à 21:02:05

je bind ? je suis désolé mais je débute en javascript, du moins je ne connaissait pas ce genre de principe en javascript

tu pourrais me montrer un exemple s'il te plait ?

merci beaucoup de prendre du temps pour moi

Nek'

6 septembre 2010 à 21:14:18

Bah en fait bind c'est un concept de programmation en général.
Ici j'entend "tu ajoutes ton évènement sur ton élémént" = "tu bind ton évènement sur ton élément"
Bref désolé pour l'abus de langage

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

Almandin

6 septembre 2010 à 21:15:39

a, justement si je reposte ici, c'est que je peut pas, la fonction est propre au lien :s

Nek'

6 septembre 2010 à 21:21:29

Ah ouais, c'est vrai.
Bah tu peux toujours faire tourner tes variables avec des arrays.
Sinon tu peux créer une fonction qui intègre les deux autres fonctions (un peu hardcore certes lol). Enfin ça s'appelle une classes

.
http://www.geotribu.net/node/2

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

Almandin

6 septembre 2010 à 21:37:24

<html>
<head>
<script type="text/javascript">
var e1, e2;
var action="";
function clickOnBlocHandler (event)
{
	e1 = event;
	bloc.removeEventListener('click', clickOnBlocHandler, false);
	setTimeout(function(){document.body.addEventListener('click', clickOnBodyHandler, false)},100);
}
	
function clickOnBodyHandler (event)
{
	e2 = event;
		
	alert(action);
	document.body.removeEventListener('click', clickOnBodyHandler, false);
	bloc.addEventListener('click', clickOnBlocHandler, false);
	
}
</script>
</head>
<body>
<a href="#" onclick="action='lien1';" id="lien1">lien 1</a>
<a href="#" onclick="action='lien2';" id="lien2">lien 2</a>
<div style="width: 100px; height: 100px; background-color: grey;"></div>
<script type="text/javascript">
var bloc = document.getElementById('lien1');
bloc.addEventListener('click', clickOnBlocHandler, false);
bloc = document.getElementById('lien2');
bloc.addEvenListener('click', clickOnBlocHandler, false);
</script>
</body>
</html>

finalement il suffit de définir les uns aprés les autres les liens, je ne pensait pas que ça marcherai sinon j'aurais pas posté pour rien *-*

Problème résolu encore une fois !
Merci a k'nex pour m'avoir mis sur la voie !!!

Nek'

6 septembre 2010 à 21:42:30

Je me disais aussi lol. Bah du coup la boucle ça devrait passer non ?

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

Almandin

6 septembre 2010 à 21:51:06

la boucle je vois pas comment la mettre en oeuvre, chaque lien a un id différent explicite :s je peut pas utiliser un compteur quoi

Nek'

6 septembre 2010 à 23:35:27

Et bah tu leurs met une classe particulière

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

A_T_J

8 septembre 2010 à 23:49:45

Citation : Nek'

PS: ne dénigre pas les autres A_T_J s'il te plait, la propagation des évènements c'est un truc chelou de toutes façons .

Avouons le, la majorité de ces gens qui passent sur le forum pour montrer qu'ils s'y connaissent et s'y prennent à la "Je suis expérimenté, tu dois faire ce que je te dis Muahahahaah" il faut leur montrer que c'est pas comme ca que ca marche

sinon ne me prenez pas trop au sérieux, j'aime aider les gens, mais je n'aime pas quand d'autres s'y prennent d'une façon pas potable.

--------
@Almandin

au fait tu devrais songer à apprendre jQuery. avec jQuery tu peux affecter l'évènement à tout les liens sans connaitre le nombre exacte, sans connaitre les id utilisés, même sans connaitre le navigateur utilisé.

le slogan de jQuery même c'est: <i>Write Less, Do more.</i>

Almandin

9 septembre 2010 à 12:02:56

oui c'est prévu pour une future maj de mon projet de refaire le js avec jquery

l'objectif là etait d'utiliser ajax, c'est fait

<< 1 2