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

Create Dynamic Function Name for Event Listeners in JavaScript

本文关键字:动态 函数 创建 侦听器 JavaScript 事件      更新时间:2023-09-26

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

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

不幸的是,这意味着编写大量重复的代码。事件侦听器调用的每个函数仅在该特定按钮的函数名称上有所不同。人们如何解决这个问题? 有没有办法使用字符串命名函数(参见: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