Accueil > Forum > > > > Lier un événement à une méthode
 Lier un événement à une méthode
jeudi 16 mars 2006 à 16:54:49 |
Lier un événement à une méthode
lelutinvert
|
Bonjour,
Voilà le problème qui se pose :
J'ai volontairement très simplifié le code dans lequel je rencontre la difficulté, mais le principe s'y trouve.
Un certain nombre de volets dans des calques sont dynamiquement affichés via PHP grâce à une boucle. Les données gérant cet affichage viennent normalement d'un fichier texte externe non détaillé ici car le problème n'est pas là.
Je cherche à utiliser le principe d'une classe pour que chaque volet puisse être géré indépendamment des autres.
D'autre part, je voudrai faire fonctionner le Javascript sous IE version 5 et + et Mozilla version 1.6 et +.
Il y a (volontairement) une erreur dans lee attaches d'événements après les "getElementById" pour exprimer l'idée de ce que je voudrai arriver à faire.
Voici le code complet de mon fichier :
---------------------------------- code pour étude ------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [ Lien ]">
<html xmlns=" [ Lien ]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Essai</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
div {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 500;
color: #000000;
padding: 10px;
}
-->
</style>
</head>
<body>
<?php
$nb_volets=5;
echo '<div id="bm_1" style="position:absolute; left:150px; top:50px; cursor:hand; cursor:pointer;" >';
for($i=0;$i<$nb_volets;$i++){
$ht=(80*$i);
echo '<div id="v_'.$i.'" style="position:absolute; left:0px; top:'.$ht.'px; width:151px; height:51px; padding: 10px; z-index:1; background-color: #CCCC33; layer-background-color: #CCCC33; border: 1px none #000000;">Volet : v_'.$i.'</div>';
}
echo '</div>';
?>
<script language="javascript" type="text/javascript">
//Détection du navigateur : soit IE, soit NS
var msie = false, mozi = false;
if (document.getElementById && attachEvent) msie = true;
else if (document.getElementById && addEventListener) mozi = true;
//Constructeur de la classe
function obj_untel(v) {
this.v = v;
//Méthode
this.coord = affiche;
alert("objet "+v+" créé");
}
//Un exemple de fonction qui transmet ici une position du pointeur
function affiche(e) {
var _x, _y;
if (msie) {
_x = event.clientX; _y = event.clientY;
} else if (mozi) {
_x = e.pageX; _y = e.pageY;
}
alert("Survol du menu "+this.v+"\n position pointeur : "+_x + " / " +_y);
}
//Création des objets "volets"
var obj_volet = new Array();
function lst_obj(){
alert("Lancement création objet volet");
for(i=0;i< <?php echo $nb_volets; ?>;i++){
obj_volet[i]=new obj_untel("v_"+i);
if (msie) {
//À partir de cre stade, je ne trouve pas comment appeler la méthode coord() dans l'objet obj_volet[i]
document.getElementById("v_"+i).attachEvent("onmouseover",obj_volet[i].coord);
} else if (mozi) {
document.getElementById("v_"+i).addEventListener("mouseover",obj_volet[i].coord,true);
}
}
}
//Initialisation après chargement
if (msie) window.attachEvent("onload",lst_obj);
else if (mozi) window.addEventListener("load",lst_obj,false);
//
</script>
</body>
</html>
Merci au "logicien" quiu sait comment faire ou me dire quel tutoriel consulter en réponse.
Lelutinvert.
|
|
vendredi 17 mars 2006 à 12:08:43 |
Re : Lier un événement à une méthode
lelutinvert
|
Bonjour,
Pour faire suite à mon premier message, j'ai trouvé une solution à partir du DOM , reste à savoir si c'est du code propre réutilisable notamment dans son principe avec la gestion des phases de propagation dans le cas entre-autres de calques imbriqués.
Je poursuis mons étude.
Celle-ci fonctionne sous IE et Mozilla, mais je ne saurais pas l'expliquer vraiment dans sa logique. Toutefois, cette solution peut interesser...Et si quelqu'un a une meilleure ou la bonne solution...
Je rapelle qu'il s'agit d'une étude, non du projet réel.
Voici ma dernière mouture :
--------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [ Lien ]">
<html xmlns=" [ Lien ]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Essai menu</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
div {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 500;
color: #000000;
padding: 10px;
}
-->
</style>
</head>
<body>
<?php
$nb_volets=5;
echo '<div id="bm_1" style="position:absolute; left:150px; top:50px; cursor:hand; cursor:pointer;" >';
for($i=0;$i<$nb_volets;$i++){
$ht=(80*$i);
echo '<div id="v_'.$i.'" style="position:absolute; left:0px; top:'.$ht.'px; width:151px; height:51px; padding: 10px; z-index:1; background-color: #CCCC33; layer-background-color: #CCCC33; border: 1px none #000000;"';
echo 'onMouseover ="obj_volet['.$i.'].coord(event);"';
echo '>Volet : v_'.$i.'</div>';
}
echo '</div>';
?>
<script language="javascript" type="text/javascript">
//Détection du navigateur : soit IE, soit NS
var msie = false, mozi = false;
if (document.getElementById) {
if (window.addEventListener) mozi = true;
else if (window.attachEvent) msie = true;
}
//Constructeur
function obj_untel(v) {
this.v = v;
//Méthode
this.coord = affiche;
alert("objet "+v+" créé");
}
//Un exemple de fonction
function affiche(e) {
var _x, _y;
if (msie) {
_x = event.offsetX; _y = event.offsetY;
} else if (mozi) {
_x = e.layerX; _y = e.layerY;
}
alert("Survol du menu "+this.v+"\n position pointeur : "+_x + " / " +_y);
}
//Création des objets
var obj_volet = new Array();
function lst_obj(){
alert("Lancement création objet volet");
for(i=0;i< <?php echo $nb_volets; ?>;i++){
obj_volet[i]=new obj_untel("v_"+i);
}
}
//Création des objets
//msie ? window.attachEvent("onload",attachEven) : window.addEventListener("load",attachEven,false);
if (msie) window.attachEvent("onload",lst_obj);
else if (mozi) window.addEventListener("load",lst_obj,false);
//
</script>
</body>
</html>
|
|
Cette discussion est classée dans : document, obj, mm, getelementbyid, volet
 Répondre à ce message
 Sujets en rapport avec ce message
obj.innerHTML [ par fgingat ]
Bonjour à tous .. Voila mon premier poste concerne un soucis de comprehension de la methode de fonctionnement de obj.innerHTML A savoir sur une page
Probleme de différence de taille entre IE et Mozilla (etc) [ par chandler_vodkamartini ]
Voilou, j'explique la situation, j'ai un scroll javascript qui agit sur une suite d'image et de texte placée dans un container qui a une certaine tail
[AIDE]Problème avec un calque et fonction Onmouseover ? [ par masta64 ]
Bonjour à tous, voila je débute et je suis entrain de construire mon site perso et je me trouve devant un probléme que je n'arrive pas à regler et ca
Redimensionnement de font sur un document.getElementById(obj).innerHTML [ par cousinlol ]
Bonsoir,J'ai une fonction impression et je veux redimensionner la taille de la police de ce que j'imprimeJ'ai fait var zi = ""+document.getElementById
Problème d'opacité... [ par nicomilville ]
Salut,J'utilise la propriété de petoleTeam pour avoir une même opacité sur tout les navigateurs...J'ai un div qui grise la page et qui a une opacié de
problème avec removechild() [ par nicomilville ]
Salut,J'ai fait une fonction pour afficher les derniers messages et j'ai aussi mis dans cette fonction un évènement click sur un élément mais cette fo
Encore des erreurs ! [ par nicomilville ]
Salut,Et oui, c'est encore moi, vous devez vous dire que je suis un nul, c'est peut être vrai, lol J'ai encore des erreurs sur mon code... Si ça co
[Javascript] Firefox et Opera VS Safari et IE [ par SpoonS2K ]
Bonjour, après moultes recherches et avoir tourné le truc dans tout les sens, je m'en remet à vous. Je débute dans le Javascript, et dèja je m'aperçoi
Internet Explorer et object [ par bond_never_die ]
Bonjour à tous. Voilà, j'ai un petit script qui permet d'afficher dynamiquement une zone d'affichage au dessus de ma page. Problème : sous Internet Ex
Document.getElementById(strId3).innerHTML = req; Problème avec IE [ par mlinux ]
Bonjour,J'ai un petit script AJAX qui fonctionne avec Firefox et Safari et ne fonctionne pas avec Internet Explorer IE 8 et IE 8.[code]/**************
 Livres en rapport
|
Derniers Blogs
 JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|