在 JavaScript 中为事件侦听器创建动态函数名称

Question

我有这个数学游戏的代码。 我有一个按钮函数，用于定义位置，然后绘制回调中指定的按钮。

问题是我只能创建其中一个，因为出于某种莫名其妙的原因，事件侦听器由它们执行的函数引用，而不是由其他字符串名称引用。

不幸的是，这意味着要编写大量重复的代码。 eventListener 调用的每个函数只会因该特定按钮的函数名称而异。 人们如何解决这个问题？ 有没有办法使用字符串命名函数（请参阅：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 个独立的事件监听器，每个监听器都有不同的“名称”。 否则，尽管有 4 个按钮，但我最终只有 2 个。

Answer 1

由于某种原因，您问题的措辞让我感到困惑：-\\

反正，

如果要通过字符串而不是函数指针调用函数，请将函数作为元素添加到 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