在 JavaScript 中为事件侦听器创建动态函数名称
Create Dynamic Function Name for Event Listeners in JavaScript
我有一个数学游戏的代码。我有一个按钮函数,它定义位置,然后绘制回调中指定的按钮。
问题是我只能创建其中之一,因为出于某种令人困惑的原因,事件侦听器由它们执行的函数引用,而不是由其他字符串名称引用。
不幸的是,这意味着编写大量重复的代码。事件侦听器调用的每个函数仅在该特定按钮的函数名称上有所不同。人们如何解决这个问题? 有没有办法使用字符串命名函数(参见:functAnim & functClick)?
function factsButton(x, y, doFunction, contentCallback)
{
var getID = document.getElementById("canvas_1");
if (getID.getContext)
{
var ctx = getID.getContext("2d");
var btnW = 100;
var btnH = 100;
var cx = x - btnW/2;
var cy = y - btnH/2;
var left = cx;
var right = cx + btnW;
var top = cy;
var bottom = cy + btnH;
function functAnim(event)
{
var mousePos = getMousePos(getID, event);
var rect = getID.getBoundingClientRect();
var mouseX = mousePos.x;
var mouseY = mousePos.y;
if (mouseX >= left
&& mouseX <= right
&& mouseY >= top
&& mouseY <= bottom)
{
contentCallback(cx, cy, btnW, btnH, true);
}
else
{
contentCallback(cx, cy, btnW, btnH, false);
}
}
function functClick(event)
{
var mousePos = getMousePos(getID, event);
var rect = getID.getBoundingClientRect();
var clickX = mousePos.x;
var clickY = mousePos.y;
if (clickX >= left
&& clickX <= right
&& clickY >= top
&& clickY <= bottom)
{
doFunction();
getID.removeEventListener("mousemove", functAnim, false);
getID.removeEventListener("click", functClick, false);
}
}
contentCallback(cx, cy, btnW, btnH, false);
getID.addEventListener("click", functClick, false);
getID.addEventListener("mousemove", functAnim, false);
}
}
编辑:
出于某种原因,我想要什么并不清楚。我不想按字符串调用函数,而是使用动态名称创建它们。例如,由于我需要创建 4 个按钮,我想像这样调用我的函数:factsButton(50, 50, addClicked, "add");使用"add",而不是"functClick",它们可以被称为"addClick"和"addAnim",或者说它是"sub"而不是"add",它将创建这些事件和函数作为"subAnim"和"subClick"。这样我就有 8 个单独的事件侦听器,每个侦听器都有不同的"名称"。否则,尽管有 2 个按钮,但我最终只有 4 个。
由于某种原因,您问题的措辞让我感到困惑:-''
无论如何
如果要按字符串而不是函数指针调用函数,请将函数添加为 javascript 对象中的元素。
// a javascript object containing function definitions
var myFunctions={
functAnim: function(event)
{
var mousePos = getMousePos(getID, event);
var rect = getID.getBoundingClientRect();
var mouseX = mousePos.x;
var mouseY = mousePos.y;
if (mouseX >= left
&& mouseX <= right
&& mouseY >= top
&& mouseY <= bottom)
{
contentCallback(cx, cy, btnW, btnH, true);
}
else
{
contentCallback(cx, cy, btnW, btnH, false);
}
},
functClick: function(event)
{
var mousePos = getMousePos(getID, event);
var rect = getID.getBoundingClientRect();
var clickX = mousePos.x;
var clickY = mousePos.y;
if (clickX >= left
&& clickX <= right
&& clickY >= top
&& clickY <= bottom)
{
doFunction();
getID.removeEventListener("mousemove", functAnim, false);
getID.removeEventListener("click", functClick, false);
}
}
}
然后,您可以按字符串调用函数。
// useage
myFunctions["functAnim"](eventObject); // calls functAnim
myFunctions["functClick"](eventObject); // calls functClick
相关文章:
- 用javascript中的param执行动态函数
- 节点.js:尝试侦听设置为动态函数的变量时出错
- 如何将动态函数绑定到动态事件
- 使用动态函数调用创建 JS 库
- 在 Jscript 中为 Q.all() 构建一个动态函数数组
- 带有传递参数的 jquery UI 对话框动态函数
- JavaScript 动态函数名称
- 动态函数/对象名称
- ExtJs4 如何在循环中创建动态函数
- 循环内部的动态函数:i var不可见
- 数组到动态函数:是否使用eval
- 使用动态函数名编写Javascript新对象实例
- 如何使用javascript构建动态函数
- 使用具有动态函数绑定的测试间谍的好方法
- AddEventListener对匿名函数的动态函数引用
- Javascript为对象添加动态函数
- Javascript动态函数
- 动态函数调用不变
- 将静态javascript函数转换为动态函数
- 从ng-click调用动态函数