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

Posted 2023-02-22

【中文标题】如何将事件和其他参数传递给单击处理程序

【英文标题】：How to pass event and other arguments to click handler

【发布时间】：2017-01-04 16:45:00

【问题描述】：

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

p.on("click", handleMouseClickEvent);

现在我想将参数传递给处理程序 handleMouseClickEvent ，我知道我可以免费获得事件对象而不传递它，但是当我尝试传递一个参数时，假设我写：

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

那么事件对象是未定义的，根本无法访问。 如何使用上述语法传递事件对象和更多参数。

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

【问题讨论】：

你想传递什么参数？例如，它们是特定于应用程序的全局状态，还是特定于被点击的元素？

【参考方案1】：

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

但是，由于 javascript 的变量作用域是如何工作的，您不必这样做。函数可以访问自身外部的变量，因此您可以简单地访问变量而无需显式传递它们：

var foo = "bar";

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

p.on("click", handleMouseClickEvent);

【参考方案2】：

你可以试试这个：

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

【讨论】：

请注意，如果您使用 JQuery，这种特殊方法将起作用，但问题是参考 EaselJS 对象。 CreateJS on 方法不支持数据参数：createjs.com/docs/easeljs/classes/DisplayObject.html#method_on

【参考方案3】：

在使用 jQuery 时，Ravi 的回答可能是最好的方法。 我会尝试提供另一种观点来解决您的问题。

通过使用

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

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

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

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

【参考方案4】：

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

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

【参考方案5】：

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

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

【参考方案6】：

参数可以通过Function.prototype.bind绑定到处理函数

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

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

.bind 方法返回一个新函数，浏览器可以使用事件对象调用该函数。

【参考方案7】：

只是为了将更具体的上下文答案加入其中。我相信这个问题是参考这个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

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

干杯。