MOOTOOLS变量范围

Question

我正在使用mootools： 我在使用addEvent时无法弄清楚如何使用变量。

我想使用for for next循环来设置循环中的值：

for (x=0;x<num;x++){
var onclickText = 'function (){onclick="addPageMoveEvent('+x+'"); }';
$('pageNum'+x).addEvent('click', onclickText);
}

＆GT;

我搜索论坛但没有找到任何帮助。

任何帮助都会很棒。

由于

Answer 1

MooTools中的addEvent方法接受两个参数：

myElement.addEvent(type, fn);

<强>参数：

• type - （字符串）要监视的事件名称（'click'，'load'等），前缀为'on'。
• fn - （function）要执行的函数。

它不接受字符串，并且传递"myFunction()"或"function() { myFunction(); }"之类的字符串将不起作用。

由于您在循环内部，并且变量x将共享环境，因此您需要将其值包含在另一个闭包中。一种方法是使用额外的闭包：

$("pagenum" + x).addEvent("click", (function(value) {
    return function() { addPageMoveEvent(value); }
})(x));

关于在循环中创建闭包的这个特殊问题，请参阅StackOverflow上的所有questions。

另外值得一试的是这篇MDC文章 - Creating closures in loops: A common mistake

Answer 2

警告：第一个例子不起作用！继续阅读以获得解释。

您将onclick HTML语法与MooTools addEvent混淆。尝试

for (var x=0;x<num;x++){
    $('pageNum'+x).addEvent('click', 'addPageMoveEvent('+x+');');
}

这更简单，更清洁，但可能仍然没有做你想要的。每次点击链接时，此代码都会调用函数addPageMoveEvent ...是您想要的吗？

由于MooTools不允许使用上述方法，因此必须使用以下内容：

以编程方式更有趣，更危险的方法是：

factory = function (x) { return function() { addPageMoveEvent(x); }; };
for (var x=0;x<num;x++){
    $('pageNum'+x).addEvent('click', factory(x));
}

这使用工厂来创建保存x值的闭包......相当复杂的代码，但这是纯粹的方式。它还可以避免使用因为您向eval字符串提供addEvent而导致的可怕{{1}}。 （似乎MooTools不喜欢其他选项。）

Answer 3

mootools的一个用例传递方法。

for (x=0;x<num;x++){
  $('pageNum'+x).addEvent('click', addPageMoveEvent.pass(x));
}

Pass在内部创建一个闭包，在其范围内保存x，因此当click事件被触发时，它具有正确的值，因为它与for循环不同。