Question

我试图通过自己创建一个javascript库脚本。当我完成它时，我很高兴，直到我注意到它在IE6中不起作用。在FireFox中，一切看起来都很好。所以我开始调试。

我注意到，setAttribute肯定是问题之一。甚至可能是最大的。因此，在查看关于使用参数设置onclick属性的互联article后，我感到很高兴，但有一件事对我来说仍然没有解决。使用回调方法很棘手，但我只是不知道如何以这种方式传递事件对象。这是旧的代码示例：

    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

最好的方法是只为它添加一个处理程序。例如：

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或{{1你可以访问该元素。确保遵循w3c为自定义属性设置的准则。 w3c custom attributes

Answer 2

好吧，用jQuery做这件事：

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

之后你可以在函数中检索它：

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

没有jQuery会变得有点困难，因为你可能不得不将值存储在一个闭包中，除非你小心，否则可以强制整个作用域链保留在内存中（不是一件好事）。

Answer 3

IE6非常糟糕。熟悉原始JS是必不可少的，但最终你不会想要为浏览器之间的微小差异做出各种调整。

Antony Mills向您展示了框架（如jQuery或原型）如何轻松实现您的生活。关于框架的另一个关键问题是，他们通常认为所有这些跨浏览器问题都很长而且很难，所以你不必这么做。

JavaScript函数回调和事件

3 个答案: