Question

是否可以使用YUI的.on（“click”，）将参数传递给函数？例如，这里有一些我正在看的代码：

function foo1() {
  var curObj = this;

    this.foo2 = function() {
         curObj.test = "foo2";
    }

    this.foo3 = function() {
         curObj.test = "foo3";
    }

  // called by
  this.blah = {};
  var blah = this.blah;
  blah['x'] = new YAHOO.widget.Button(x)
  blah['x'].on("click", foo2)

  blah['y'] = new YAHOO.widget.Button(y)
  blah['y'].on("click", foo3)
}

我想通过执行以下操作来删除一些冗余：

function setTest(this, foo) {
  this.test = foo;
}

function foo1() {
  var curObj = this;

  // called by
  this.blah = {};
  var blah = this.blah;
  blah['x'] = new YAHOO.widget.Button(x);
  blah['x'].on("click", thisTest("foo2"));

  blah['y'] = new YAHOO.widget.Button(y);
  blah['y'].on("click", thisTest("foo3"));
}

我的理解是YUI会将“this”对象传递给从.on（“click”，function）调用的函数。

感谢您的帮助。

Answer 1

您可以根据此处的API文档发送一个参数：http://developer.yahoo.com/yui/docs/YAHOO.util.Element.html#method_on

例如：

function setTest(this, foo) {
  this.test = foo;
}

function foo1() {
  var curObj = this;

  // called by
  this.blah = {};
  var blah = this.blah;
  blah['x'] = new YAHOO.widget.Button(x);
  blah['x'].on("click", thisTest, "foo2");

  blah['y'] = new YAHOO.widget.Button(y);
  blah['y'].on("click", thisTest, "foo3");
}

如果要传递多个值，则需要创建包含要传递的所有值的数组或对象。这是API中的限制。

Answer 2

您可以使用JavaScript闭包来实现此目的。这还可以让您更好地控制希望事件处理程序有权访问的参数的数量和类型。此外，此方法与框架无关。

例如，在问题中给出的代码片段中，thisTest可以按如下方式执行闭包。

var thisTest = function (arg1, arg2) {

    return function () { // handler function

        // arg1 and arg2 will be available inside this function.

        // also any arguments passed to the handler by the caller will be 
        // available without conflicting with arg1 or arg2.

    }
}

这是一个证明这一点的jsFiddle链接。 http://jsfiddle.net/M98vU/4/

这里必须记住的两件事是：

通过闭包附加事件处理程序引起的循环引用可能会导致旧（ish）浏览器中的内存泄漏。在不需要或在页面卸载时拆卸处理程序可能是一个好主意。
在附加处理程序时，必须知道（可确定）传递的固定/静态参数。

使用YUI库的Javascript

2 个答案: