嘿，我有一个使用画架JS 构建的画布。 在我的画布中，我使用以下语法为它们定义了点击处理程序：
p.on("click", handleMouseClickEvent);
现在我想将参数传递给处理程序 handleMouseClickEvent ，我知道我可以免费获得事件对象而不传递它，但是当我尝试传递一个参数时，假设我写：
p.on("click", handleMouseClickEvent(arg1));
那么事件对象是未定义的，根本无法访问。 如何使用上述语法传递事件对象和更多参数。
p.on("click", handleMouseClickEvent(arg1,arg2,...,argN));
【问题讨论】：
标签： javascript jquery angularjs
由于您没有自己调用处理程序函数（浏览器正在为您执行此操作），因此您无需为处理程序指定更多参数。您将得到的只是事件对象。
但是，由于 JavaScript 的变量作用域是如何工作的，您不必这样做。函数可以访问自身外部的变量，因此您可以简单地访问变量而无需显式传递它们：
var foo = "bar";
var handleMouseClickEvent = function(e) {
console.log(e.type); // 'click'
console.log(foo); // 'bar'
};
p.on("click", handleMouseClickEvent);
【讨论】：
你可以试试这个：
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(事件 [, 选择器] [, 数据], 处理程序)
事件类型：字符串
一种或多种以空格分隔的事件类型和可选的命名空间，例如 “单击”或“keydown.myPlugin”。
选择器类型：字符串
一个选择器字符串，用于过滤 > > > 触发事件的选定元素的后代。如果选择器为空或省略，则事件总是 到达被选元素时触发。
数据类型：任何东西
触发事件时要在 event.data 中传递给处理程序的数据。
handler 类型：Function(Event eventObject [,任何东西 额外参数] [, ...])
事件发生时执行的函数 触发。值 false 也可以作为 a 的简写 只返回 false 的函数。
欲了解更多信息，请参阅JQuery Documentation of on() event Handler
【讨论】：
on 方法不支持数据参数：createjs.com/docs/easeljs/classes/DisplayObject.html#method_on
在使用 jQuery 时，Ravi 的回答可能是最好的方法。 我会尝试提供另一种观点来解决您的问题。
通过使用
p.on("click", handleMouseClickEvent(arg1));
您没有将函数作为事件处理程序传递，而是在执行它并将其返回值作为事件处理程序传递。 这也许已经为您指出了答案，对吧？ 尝试像这样定义您的事件处理程序：
function handleMouseClickEvent(arg1)) {
return function reallyHandleMouseClickEvent(event) {
// all variables available here: arg1, event
}
}
当然，您可以根据需要添加任意数量的 argN 参数。
【讨论】：
这应该处理它。您可以添加更多参数。
(function(arg1, arg2) {
p.on("click", function(event) { handleMouseClickEvent(event, arg1, arg2) })
})(arg1, arg2);
【讨论】：
你需要定义你的事件处理程序，试试这个：
function handleMouseClickEvent(arg1)) {
return function doSomething(event) {
//logic here
}
}
【讨论】：
参数可以通过Function.prototype.bind绑定到处理函数
p.on("click", handleEventWithArg.bind(this,arg1));
function handleEventWithArg(arg1, event) {
console.log(arg1);
console.log(event);
});
.bind 方法返回一个新函数，浏览器可以使用事件对象调用该函数。
【讨论】：
只是为了将更具体的上下文答案加入其中。我相信这个问题是参考这个codepen提出的：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
}
还有很多其他方法可以建立这种关系，这些只是一些建议。创建包装函数会起作用，但恕我直言，对于长期或更大的应用程序来说，这不是一个好方法。你完全可以继续使用你的方法，因为它似乎对你有用——但我想提供一些思考的食物。
干杯。
【讨论】：