JavaScript 函数回调和事件答案

【问题标题】：JavaScript Function callback and eventsJavaScript 函数回调和事件
【发布时间】：2009-11-01 22:29:54
【问题描述】：

我试图自己制作一个 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 = 回调（f，参数）

传递事件对象值，并在以后使用它们？

【问题讨论】：

标签： javascript events callback

【解决方案1】：

好吧，用 jQuery 来做：

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

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

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

如果没有 jQuery，它会变得有点困难，因为您可能必须将值存储在一个闭包中，除非您小心，否则可能会迫使整个作用域链留在内存中（这不是一件好事）。

【讨论】：

这是那些自己动手做起来很难做到正确的领域之一（比如，写一个多线程队列）。使用库的函数来解决问题，因为测试 jQuery 的人比测试你的应用程序的人多得多。
谢谢安东尼。你的回答很有帮助。我的意思是它现在不起作用，但我想由于基本的 javascript 没有一个清晰简单的解决方案来解决我的问题......现在是我了解更多关于 jQuery 或其他库的正确时间。不久之后，我将以不同的观点回到这个问题。

【解决方案2】：

最好的方法是给它附加一个处理程序。例如：

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 custom attributes

【讨论】：

添加自定义属性是一种方法，是的。但是要小心在自定义属性中存储对 JavaScript 对象的引用（存储文本很好），因为这可能会泄漏 IE 中的内存（直到 IE6 中的浏览器关闭，直到 IE7 中的页面卸载，在 IE8 中不确定）因为你可能在 JS 中有一个对 DOM 的引用，在那个 DOM 对象中有一个对 JS 对象的引用，创建了一个循环引用，IE 垃圾收集器不知道它会破坏。

【解决方案3】：

IE6 这样就很糟糕了。熟悉原始 JS 是必不可少的，但最终您不会想为浏览器之间的微小差异做出各种调整。

Antony Mills 向您展示了一个框架（如 jQuery 或原型）可以让您的生活变得多么简单。框架的另一个关键问题是，它们通常对所有这些跨浏览器问题都进行了长期而认真的思考，因此您不必这样做。

【讨论】：