JavaScript Fonction de rappel et événements

Question

J'essayais de faire un script de galerie javascript par moi-même. Quand j'en ai fini, j'étais plutôt content, jusqu'à ce que je remarque, que ça ne marche pas dans IE6. Dans FireFox tout semble bien. J'ai donc commencé le débogage.

J'ai remarqué que setAttribute est l'un des problèmes à coup sûr. Peut-être même le plus grand. Donc, après avoir regardé un interetsing article sur la définition de la propriété onclick avec des paramètres, j'étais plutôt content, mais une chose restait non résolue pour moi. L'utilisation de la méthode de rappel est difficile, mais je ne sais pas comment passer un objet événement de cette façon. Voici l'ancien exemple de code:

var miniatury = document.getElementsByTagName ("a"); 
function zoom(){ 
    for (l = 0; l < miniatury.length; l++) { 
     if (miniatury[l].className.match("zoom") != null ) { 
      var href = miniatury[l].href; 
      if (document.images) { 
       preImg[l] = new Image(); 
       preImg[l].src = href; 
       miniatury[l].setAttribute("onclick", "przybliz(preImg["+[l]+"].src, event); event.returnValue=false; return false;"); 
      } 
      else { 
      miniatury[l].setAttribute("onclick", "przybliz(href, event); event.returnValue=false; return false;");} 
      } 
    } 
} 
function przybliz(adres, event) { 
pojemnik.style.display = 'block'; 
if (navigator.appName == "Microsoft Internet Explorer") { 
    pozycjaX= window.event.clientX + document.documentElement.scrollLeft 
     + document.body.scrollLeft; 
    pozycjaY= window.event.clientY + document.documentElement.scrollTop 
     + document.body.scrollTop; 
    } 
    if (navigator.appName != "Microsoft Internet Explorer") { 
    pozycjaX = event.clientX + window.scrollX; 
    pozycjaY = event.clientY + window.scrollY; 
    } 
pojemnik.style.top = pozycjaY+'px'; 
pojemnik.style.left = pozycjaX+'px'; 

Question est: Comment changer le code dans

onclick = rappel (f, arguments)

avec passage des valeurs d'objet d'événement, et avoir le luxe de les utiliser plus tard?

Answer 1

Eh bien, le faire avec jQuery:

$(miniatury[l]).bind("click", preImg[l], przybliz); 

Après quoi, vous pouvez le récupérer dans la fonction:

function przybliz(evt) { 
    var adres = evt.data; 
    //... 
} 

Sans jQuery, il devient un peu plus difficile, car vous pourriez avoir à stocker la valeur dans une fermeture, qui sauf si vous êtes prudent peut forcer l'ensemble de la chaîne de portée à rester en mémoire (pas une bonne chose).

Answer 2

Le meilleur moyen est de simplement ajouter un gestionnaire à celui-ci. par exemple:

if (minitury.attachEvent) { 
    minitury.attachEvent("onclick", callback); 
} else { 
    minitury.addEventListener("click", callback, false); 
} 

Où le rappel est une fonction avec un seul paramètre. Comme ci-dessous:

function callback(evt) { 
    if (! evt) evt = window.event; 
    <insert other code here> 
} 

Cela devrait être ce que vous cherchez à faire.

EDIT: J'ai réalisé que vous demandiez comment envoyer des rappels paramétrés. Je doute qu'il existe une bonne méthode de navigateur croisé, mais vous pouvez contourner cela en ajoutant un attribut personnalisé à l'élément en question qui contient vos données et à travers l'objet événement (evt.target ou evt.srcElement) vous pouvez accéder à l'élément . Assurez-vous de suivre les directives définies par le w3c pour les attributs personnalisés. w3c custom attributes

Answer 3

IE6 est plutôt mauvais. Se familiariser avec JS brut est essentiel, mais en fin de compte vous ne voudrez pas être dérangé par faire toutes sortes d'accommodements pour les petites différences entre les navigateurs. Antony Mills vous montre à quel point un framework (comme jQuery ou un prototype) peut vous rendre la vie facile. Une autre chose importante à propos des frameworks est qu'ils ont généralement réfléchi longuement et durement à tous ces problèmes de navigateur afin que vous n'ayez pas à le faire.