Функция обратного вызова JavaScript и события

Question

Я пытался сделать скрипт галереи JavaScript самостоятельно. Когда я закончил с этим, я был очень счастлив, пока не заметил, что это не работает в IE6. В FireFox все выглядит отлично. Итак, я начал отладку.

Я заметил, что setAttribute - одна из проблем. Может быть, даже самый большой. Поэтому после просмотра интересующей статьи о настройке свойства onclick с параметрами я был отчасти рад, но одна вещь осталась для меня нерешенной. Использовать метод обратного вызова сложно, но я просто не знаю, как передать объект события таким образом. Вот старый пример кода:

    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';

Вопрос: Как изменить код на

onclick = callback (f, arguments)

с передачей значений объекта события и возможностью использовать их позже?

Answer 1

Что ж, делаем это с помощью jQuery:

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

После чего вы можете получить его в функции:

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

Без jQuery это становится немного сложнее, поскольку вам, возможно, придется хранить значение в замыкании, которое, если вы не будете осторожны, может заставить всю цепочку областей оставаться в памяти (не очень хорошая вещь).

Answer 2

IE6 довольно плох в этом смысле. Знакомство с необработанным JS очень важно, но в конечном итоге вам не захочется возиться со всеми видами приспособлений для небольших различий между браузерами.

Энтони Миллс показывает, как легко фреймворк (например, jQuery или прототип) может сделать вашу жизнь. Еще одна ключевая вещь в фреймворках заключается в том, что они, как правило, долго и усердно думали обо всех этих кросс-браузерных проблемах, чтобы вам не пришлось это делать.

Answer 3

Лучший способ - просто добавить к нему обработчик. например:

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

Где обратный вызов - это функция с одним параметром. Как ниже:

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

Это должно быть то, что вы хотите сделать.

РЕДАКТИРОВАТЬ: я понял, что вы спрашиваете, как отправить параметризованные обратные вызовы. Я сомневаюсь, что есть хороший кросс-браузерный метод для этого, но вы могли бы обойти это, добавив пользовательский атрибут к рассматриваемому элементу, который содержит ваши данные, и через объект события (либо evt.target, либо evt.srcElement) вы может получить доступ к элементу. Обязательно следуйте рекомендациям, установленным w3c для пользовательских атрибутов. Пользовательские атрибуты w3c