Question

嘿，我使用easelJS构建了一个画布。在我的画布中，我有点使用以下语法为它们定义点击处理程序：

p.on("click", handleMouseClickEvent);

现在我想将参数传递给处理程序 handleMouseClickEvent ，我知道我在没有传递的情况下免费获取事件对象，但是当我尝试传递一个参数时，我想写一下： / p>

  p.on("click", handleMouseClickEvent(arg1));

然后事件对象未定义且根本无法访问。如何使用上述语法传递事件对象和更多参数。

p.on("click", handleMouseClickEvent(arg1,arg2,...,argN));

Answer 1

使用jQuery时，Ravi的答案可能是最好的方法。我会尝试提供另一个视角来解决你的问题。

使用

p.on("click", handleMouseClickEvent(arg1));

您没有将该函数作为事件处理程序传递，您正在执行它并将其返回值作为事件处理程序传递。那或许已经指出了答案，对吧？尝试像这样定义事件处理程序：

function handleMouseClickEvent(arg1)) {
    return function reallyHandleMouseClickEvent(event) {
        // all variables available here: arg1, event
    }
}

当然，您可以根据需要添加任意数量的argN参数。

Answer 2

由于您没有自己调用处理函数（浏览器正在为您执行此操作），因此您无法为处理程序指定其他参数。你得到的只是事件对象。

但是，由于JavaScript的变量范围如何工作，您不必这样做。函数可以访问自身之外的变量，因此您只需访问变量而无需明确地传递变量：

var foo = "bar";

var handleMouseClickEvent = function(e) {
    console.log(e.type); // 'click'
    console.log(foo); // 'bar'
};

p.on("click", handleMouseClickEvent);

Answer 3

你需要定义你的事件处理程序，试试这个：

function handleMouseClickEvent(arg1)) {
    return function doSomething(event) {
        //logic here
    }
}

Answer 4

你可以试试这个：

p.on("click", null, {arg1: "abc", arg2: "xyz"},handleMouseClickEvent);

//And in your function, you can get the event data like this

function handleMouseClickEvent()
{
    alert(event.data.arg1);
    alert(event.data.arg2);
}

根据官方文件，on采用这样的论据：

.on（events [，selector] [，data]，handler）

事件类型：字符串

一个或多个以空格分隔的事件类型和可选的命名空间，例如   ＆＃34;单击＆＃34;或＆＃34; keydown.myPlugin＆＃34;。

选择器类型：字符串

用于过滤所选元素的后代的选择器字符串＆gt; ＆GT; ＆GT;触发事件。如果选择器为null或省略，则事件始终为   当它到达所选元素时触发。

数据类型：任何内容

触发事件时要在event.data中传递给处理程序的数据。

handler 类型：Function（Event eventObject [，Anything   extraParameter] [，...]）

事件发生时执行的功能   触发。值false也允许作为a的简写   简单地返回false的函数。

有关详细信息，请参阅JQuery Documentation of on() event Handler

Answer 5

这应该处理它。您可以添加更多参数。

(function(arg1, arg2) {
  p.on("click", function(event) { handleMouseClickEvent(event, arg1, arg2) })
})(arg1, arg2);

Answer 6

可以使用Function.prototype.bind

将参数绑定到处理函数

p.on("click", handleEventWithArg.bind(this,arg1));

function handleEventWithArg(arg1, event) {
    console.log(arg1);
    console.log(event);
});

.bind方法返回一个浏览器可以使用事件对象调用的新功能。

Answer 7

只是为了在混合中提出更具针对性的答案。我相信这个问题是在参考此代码集时提出的：http://codepen.io/Barak/pen/AXZxKN

从架构的角度来看，将参数注入处理程序是一种您不需要的解决方法。相反，请使用event target访问点击/互动的内容，并确定所需的值。

对于您的示例，您正在查找用于绘制图表中的点的原始数据属性。您可以将这些属性注入显示对象，注入对原始数据对象的引用，或创建查找表以将显示对象与其相关数据点相关联。

for (...) {
    var point = data[i];
    var dot = new createjs.Shape();
    dot.x = point.x * GRAPH_WIDTH;

    // Inject property or reference 
    dot.point = point;

    // Create lookup
    lookupTable[i] = dot;
}

然后当您单击该对象时，请查找数据。

dot.on("click", function(event) {
    var dot = event.target;

    // Use reference
    var point = dot.point;

    // Or use lookup
    var index = lookup.indexOf(dot);

    //...do stuff with it
}

还有很多其他方法可以创建这种关系，这些只是一些建议。创建包装函数将起作用，但恕我直言，它不是一个长期或更大的应用程序的好方法。您可以完全继续使用您的方法，因为它似乎对您有用 - 但我想提供一些值得思考的食物。

干杯。

如何将事件和其他参数传递给单击处理程序

7 个答案: