[Résolu] Javascript et DOM, gestion dynamique des événements

Bonjour à tous,

Je bloque depuis quelques heures sur un problème assez simple...

Au cours de l'éxécution d'une fonction Javascript de ma page web, je crée dynamiquement des éléments html (avec document.createElement). Je souhaite que ces nouveaux éléments réagissent à certains événements (clic par exemple).

Voici ce que j'ai écrit:

// Création de l'élément
e = document.createElement('div');
// (...)
// Pour internet explorer
if(window.attachEvent) e.attachEvent("onclick", maFonc);
// Pour les autres
else e.addEventListener("click", maFonc, false);

L'élément (e) est ensuite placé au bon endroit dans la page. Voici le code de la fonction 'maFonc':

function maFonc(ev){
  alert("Youpi !");
}

Normalement, le message "Youpi" doit s'afficher lorsque l'on clique sur la div (une fois placée dans la page). Ca marche sous IE, mais je n'arrive pas à le faire fonctionner sous Firefox.

Je précise qu'il est important de récupérer l'évenement (event) dans la fonction "maFonc", car j'en aurai besoin pour les traitements.

J'espère avoir été suffisamment clair... merci d'avance pour votre aide !

Bonne continuation.
Jb
Modifié par jiber2fr (14 Jul 2007 - 07:23)

Bonjour, utilise addEvent sur le site de quirksmode

salut ,

pour ajouter un gestionnaire d'évènement tu peux je pense passer par le
modèle 'traditionnel' des propriétés d'objets

function addElement() {
		 	var d =  document.createElement('div');
			d.setAttribute('id','newid');
			
			var b = document.getElementById('b');
			b.appendChild(d);
			// ajout de la propriete
			
			d.onclick =mafonction;
			
		 }
		 function mafonction(evt) {
		 	var evt = evt || window.event;
			alert(evt);
		 }
		 
		 window.onload = addElement;

Testé sous FF , Opera et Ie6 (émulation Wine) ...
il y a surement d'autre possibilité
+

Bonjour,

Merci à vous deux. Kzone, cette solution fonctionne mais ne me convient pas, car j'aurai besoin d'ajouter plusieurs listeners sur le même événement (plusieurs fonctions lors d'un clic), ce qui n'est pas possible avec la méthode traditionnelle (qui ne garde que le dernier listener ajouté).

Mais j'ai trouvé la solution ! Il suffisait d'inverser les deux lignes de mon code, tout simplement car Firefox ne "plante" pas sur "window.attachEvent" (la fonction ne doit pas faire grand chose, mais elle existe). Firefox ne rentrait donc jamais dans le "else".

Voila la solution qui marche pour ajouter l'événement:

e = document.createElement('div');
if (e.addEventListener){
  a.addEventListener('click', maFonc, false);
} else if (e.attachEvent) {
  a.attachEvent('onclick', maFonc);
}

Merci !

Bonne continuation

function addEvent( obj, type, fn )
{
	if (obj.addEventListener)
		obj.addEventListener( type, fn, false );
	else if (obj.attachEvent)
	{
		obj["e"+type+fn] = fn;
		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
		obj.attachEvent( "on"+type, obj[type+fn] );
	}
}

Et ensuite

addEvent(e,'click',maFonc);

De plus tu pourras te servir de la fonction n'importe où après.

Shinuza a écrit :
De plus tu pourras te servir de la fonction n'importe où après.

Oui, mais encore une fois, même l'auteur de ces fonctions, John Resig, déconseille de les utiliser.

Dans Pro Javascript Techniques, il conseille d'utiliser la version de dean edwards, néanmoins c'est assez rare d'avoir des soucis avec celle ci.

Shinuza a écrit :
Dans Pro Javascript Techniques, il conseille d'utiliser la version de dean edwards, néanmoins c'est assez rare d'avoir des soucis avec celle ci.

Sur quel critère te bases-tu pour dire qu'il est rare d'avoir des soucis avec ?

Cette fonction est
- lente : elle se base sur le toString d'une fonction.
- potentiellement dangereuse pour la même raison que le point du dessus.
- créatrice de fuites de mémoire pour IE.

Je l'utilise sur de grands sites sans lenteur, je fais du profiling sur toutes mes applications, et je n'ai encore jamais de soucis.

a écrit :
Calls Percentage Total Time Avg
64 9.09% 15.625ms 0.244ms

C'est pas ce que j'appelle être lent y'a quand même 64 appels sur une page.

J'ai une librairie qui implante cette fonction, et comme je compte changer un certain nombre de principe et de fonction j'étudie les pour et les contre de la version de Dean Edwards
Modifié par Shinuza (16 Jul 2007 - 14:54)

Shinuza a écrit :
C'est pas ce que j'appelle être lent y'a quand même 64 appels sur une page.

Ca ne veut pas dire grand chose sans comparaison avec d'autres méthodes.

Un petit jeu amusant :

window.onload = function() {
	for (var i = 0; i < 10000; ++i) {
		addEvent(document.createElement("div"), "click", function() {});
	}
};

Observer l'évolution de l'utilisation de la mémoire sous IE à chaque rafraîchissement de la page...

15 ms ce n'est pas lent, dans l'absolu ou en relatif

Pour les 10 000 itérations, la version de Dean Edwards est plus lente que celle de John Resig. (500 ms vs 1500ms)

Ensuite avec 1000 itérations (il faut vraiment en vouloir pour attacher une fonction sur 1000 éléments déja) le problème n'apparait pas.

J'aimerais tester la solution de Yahoo, j'ai testé recemment une méthode qui flush les events sur le window.unload, mais elle plante (c'était censé corriger les fuites de mémoire sous IE)

En tout cas, comme RAM grabber, c'est sacrément radical

Je sais pas pour vous mais de toute façon pour les nouveaux sites que je développe, je recommande aux visiteurs de passer sous Firefox. Je développe pour que ça marche parfaitement sous Firefox (en général il suffit de respecter les recommandations W3C), et j'essaye de limiter les dégats sous IE6 et IE7, tout en sachant que ça sera éventuellement plus lent ou moins joli avec IE...

Ce raisonnement agace peut-être les gens qui sont sous IE, mais, les pauvres, s'ils savaient à quel point c'est pénible de toujours se casser la tête des heures pour faire marcher des p'tites choses toutes simples avec IE... (et c'est valable autant pour les CSS que pour Javascript).

C'était mon coup de gueule du jour.

a écrit :

jiber2fr a écrit
Ce raisonnement agace peut-être les gens qui sont sous IE, mais, les pauvres, s'ils savaient à quel point c'est pénible de toujours se casser la tête des heures pour faire marcher des p'tites choses toutes simples avec IE...

... et pourquoi devraitent-ils s'en soucier !??
La personne qui achète une voiture genre 'Gti' n'a pas à se poser la question de la technique et de la méchanique utilisée , et n'achéterait certainement pas si cette
voiture si la notice indique : " à utiliser surtout sur autoroute et nationale ; cette voiture n'est pas faite pour les départementales "

Bon je sais les comparaisons imagées ne sont pas toujours des plus probantes
et pertinentes ...

Avec les développements dit ' web 2.0' ( sick ) où c'est l'utilisateur qui définira de plus en plus son environnement navigateur ( son bureau ambulant ) , les types de développement spécifiques tel 'client' ou tels 'résolution' me semble 'hors contexte' ...

Il me semble que les solutions existent pour avoir des applications tout navigateur confondu (cross-browser) , et quelques 'gourous' nous donnent leurs trucs ....

Je ne pense pas qu'une compatibilité total existe un jour (pessismiste va ) , mais gueulons ensemble contre ses non-respects ...
(et dire que c'est un sujet résolu )

kzone a écrit :
(et dire que c'est un sujet résolu )

Justement, on peut ouvrir le débat

Je n'ai pas dis que les utilisateurs devaient se soucier des difficultés techniques dues à tel ou tel navigateur, mais je pense qu'ils peuvent comprendre que, comme les navigateurs sont différents, il n'est pas forcément possible que tout marche tout le temps partout...

Du coup, plutôt que de faire quelque chose qui marche moyennement partout, je préfère m'impliquer à fond pour un type de navigateur et faire au mieux pour les autres. Firefox me parait un choix logique, car utilisable à peu près partout (Windows, Linux, Mac) et assez proche des standards.

Salut,

Ce qu'il faut comprendre, c'est que certaines personnes ne peuvent pas choisir quel navigateur ils utilisent (ils ont IE sur leur machine et ne savent pas en installer un autre ni lequel choisir, ils utilisent un lecteur d'écran qui est lié à un navigateur en particulier, ils n'ont pas le droit d'installer des logiciels sur leur machine, ils accèdent à Internet par l'intermédiaire d'une borne publique, ...).

D'une manière générale, c'est sûr qu'il est préférable de développer pour tous les navigateurs (ou plutôt pour aucun en particulier).

Mais dans mon cas précis, je réalise en fait une application logicielle sous forme de site web (en réalité, il s'agit d'une application client/serveur avec utilisation abondante de Javascript / Ajax coté client).

Donc, comme ce site ne sera de toute façon pas accessible à tous (non voyants, non-javascript...), c'est perdu d'avance alors bon...

jiber2fr a écrit :
Mais dans mon cas précis, je réalise en fait une application logicielle sous forme de site web (en réalité, il s'agit d'une application client/serveur avec utilisation abondante de Javascript / Ajax coté client).

C'est un cas très particulier alors, ce que tu n'avais pas mentionné avant.

Bonjour à tous,
j'ai un souci qui me prend la tête depuis le début de la matinée avec mon javascript. Pourtant le code est très simple, mais je comprend pas pourquoi ça marche pas !
Le code que je veux mettre dans ma page n'est pas vraiment celui-ci mais même celui que je joint à ce message ne fonctionne pas.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function messagealert()
{
alert("Message Alerte");
}
document.getElementById("image").onclick=messagealert;
</script>
</head>

<body>
<img id="image" src="image.jpg">
</body>
</html>

Au niveau évènement, quand c'est moi qui écrit, rien ne fonctionne, j'ai essayé pleins de choses, quand je recopie le code de tutoriaux ça ne fonctionne pas non plus... c'est dingue !

Pourriez-vous m'aidé s'il vous plait parce que je ne trouve rien à ce sujet.
Merci

Bonjour et bienvenue mydigitalbath

Pour avoir plus de chance d'obtenir une réponse, le mieux serait de créer ton propre sujet plutôt que de remonter un vieux sujet... résolu.