11548 sujets

JavaScript, DOM et API Web HTML5

JS : Evenement & validation W3C

Bonjour (ou bonsoir en fait) !

Jusqu'à présent j'avais pris l'habitude d'utiliser les évènements Javascript en intégrant l'enregistrement de l'évènement directement au niveau de l'objet concerné.

exemple: 


function afficheAlert(msg) {
    alert(msg),
}



<a href="" onmouseover="afficheAlert('vous survolez le lien');">lien</a>


Je voudrais pouvoir utiliser une méthode valide W3C et utiliser qqchose dans le style :


var obj = document.getElementById('id_du_lien');
obj.addEventListener('mouseover',afficheAlert, false);


Et mon problème est : comment faire en sorte que cette méthode prenne en compte les paramètres de ma fonction, à savoir le message à afficher ds la fenêtre d'alerte ?
Salut cougniflette et bienvenue Smiley cligne ,

je ne suis pas un pro du Javascript mais je dirais que :

1) pour ce que tu veux faire j'aurais utilisé l'attribut title du lien ce qui permet d'avoir un affichage même si le JS est désactivé.

2) en me basant sur les tutos Javascript et notamment celui-ci il vaut mieux éviter d'utiliser directement addEventListener mais plutôt une fonction générique.


Ce qui donnerait quelque chose comme :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript"><!--
//fonction addEvent
function addEvent(oElem, sEvType, fn, bCapture)
{
   return oElem.addEventListener?
      oElem.addEventListener(sEvType, fn, bCapture):
      oElem.attachEvent?
         oElem.attachEvent('on' + sEvType, fn):
         oElem['on' + sEvType] = fn;
}
function initLiens() {
	var liens = document.getElementsByTagName("a");
	for (var j = 0; j < liens.length; j++) {
		addEvent(liens[j], 'mouseover', afficheAlert, false);
	}
}
function afficheAlert(event) {
	lien = event.target || window.event.srcElement;
	alert(lien.title);
}
addEvent(window, 'load', initLiens, false);
//--></script>
</head>
<body>
<p>
	<a href="#" title="vous survolez le lien 1">lien 1</a>
	<a href="#" title="vous survolez le lien 2">lien 2</a>
	<a href="#" title="vous survolez le lien 3">lien 3</a>
</p>
</body>
</html>

A+
Hello

Dans ce cas, tu ne sembles pas avoir réellement besoin d'utiliser le gestionnaire d'évenements, un simple onmouseover pourrait suffire.

<a href="#" title="Blablabla" id="monLien">Mon lien</a>

function survol() {
alert(this.title);
}

document.getElementById('monLien').onmouseover = survol;

Modifié par Tymlis (28 Aug 2008 - 02:02)
Merci pour vos réponses,

j'apprécie votre aide, cela dit, je n'ai fait que donner un simple exemple pour illustrer mon problème qui est un peu plus complexe

Voila la fonction que j'utilise en question : 




function afficherimg(obj,text) {	
	var objdiv = document.createElement("div"); 
	objdiv.style.display="none"; 
	objdiv.style.position="absolute"; 
	objdiv.style.padding="0"; 
	objdiv.style.margin="0";
	objdiv.style.border='2px solid #336600';
	objdiv.style.backgroundColor="#FFFFFF";
	objdiv.style.color="#CAB974";
	objdiv.innerHTML="Chargement...";
	var imgzoom = document.createElement("img"); 
	document.body.appendChild (objdiv); 

	obj.onmouseout=function() {
		obj.onmousemove='';
		document.body.removeChild (objdiv); 
	
	obj.onmousemove=function(i) {
		var y=document.documentElement.scrollTop;
		var x=document.documentElement.scrollLeft;
		objdiv.y=y;
		objdiv.x=x;
		if (i) {
			objdiv.ey=i.clientY;
			objdiv.ex=i.clientX;
			x+=i.clientX;
			y+=i.clientY;
		}
		else {
			objdiv.ey=event.y;
			objdiv.ex=event.x;
			x+=event.x;
			y+=event.y;
		}
		objdiv.style.top=(y-(objdiv.offsetHeight/2))+'px';
		objdiv.style.left=(x+20)+"px";	
		objdiv.style.display=''; 
	}

	imgzoom.onload=function() { 
		objdiv.innerHTML="";
		objdiv.appendChild(imgzoom);
		objdiv.style.top=((objdiv.ey+document.documentElement.scrollTop)-(objdiv.offsetHeight/2))+'px';
	}

	imgzoom.src=text;
}



<a href="" onmouseover="afficherimg(this,'img.jpg');" title="">lien</a>


L'idée étant de faire en sorte que ma fonction reste réutilisable tout en faisant qqchose de valide W3C

merci d'avance
Modifié par cougniflette (28 Aug 2008 - 09:05)

balise.addEventListener('event', function(){mafonction(param)}, false);


Ou encore, si le paramètre varie (par exemple dans une boucle) :


var temp=function(fonction, param){
    return function(){fonction(param)};
}
for(var i=0; i<10; i++) balise.addEventListener('event', temp(mafonction, i), false);
Sujet clos
Aller à