在事件侦听器中使用 eval(myFunctionName) 作为回调的替代方法是什么？

Question

I set about asking this question wrongly, so I am starting again, beginning with the specifics of the issue I am wrestling with, rather than the general features of the issue.

我有一个对象，其中的值是字符串。它们几乎需要是字符串，因为它们是从 HTML5 自定义 data-* 属性中提取的，我真的不想开始在 HTML 属性中编写 javascript，就像 1999 年一样.

这是自定义 data-* 属性之一的示例：

data-event="{«eventListener» : «transitionend», «eventAction» : «showText»}"

如您所见，它基本上是一个 JSON 字符串，稍作修改，使其可以采用 HTML 属性值的形式。

我希望能够解析自定义 data-* 属性并将其转换为以下 javascript:

parentElement.addEventListener('transitionend', showText, false);

为此，我需要：

将«和»字符替换为"字符
JSON.parse将结果值转化为对象
如果 useCapture 参数不存在则创建它（如本例所示）
然后我就可以（几乎）直接创建 addEventListener 语句

事实上 - 当然 - 我最终得出这样的声明：

parentElement.addEventListener('transitionend', 'showText', false);

这不起作用，因为我无法调用 'showText' - 它只是一个字符串，没有指向函数。

解决此问题的最简单方法是创建此语句，而不是：

parentElement.addEventListener('transitionend', eval('showText'), false);

其中等同于：

parentElement.addEventListener('transitionend', showText, false);

唯一让我退缩的是我不确定 eval() 是否真的应该永远不要使用，或者是否应该基本上避免使用 - 而且，尽管有正常警告，这种不寻常的情况 是可以接受的部署情况eval()。

问题：在Javascript中获取一个恰好是函数名称的字符串并通过使用访问和执行该函数是否被误导或不可取eval() 在字符串上？

如果它不可取，当我知道一个函数的名称并且我希望将它插入事件处理程序时，有什么替代方法？

如果我最好避免这种情况：

parentElement.addEventListener('transitionend', eval('showText'), false);

我应该改用什么？

或者...在一些情况下使用eval()是否完全可以接受 - 这就是其中之一？

Answer 1

如果您的函数在全局范围内，则这样做：

myElement.addEventListener('click', window[myObject.function1], false);

方括号只是 . 的替代语法 - 但它们允许变量属性名称。

检查这个：

const obj = { a: 'Hello this is obj.a' };

const key = 'a';

console.log(obj.a);
console.log(obj['a']);
console.log(obj[key]);

Answer 2

为了响应更新，您最好将所有事件处理程序放在一个对象中而不是全局命名空间中，即：

之前：

function showText(event) {
   ...
}

function anotherHandler(event) {
   ...
}

之后：

const myActions = {
   showText(event) {
      ...
   },
   anotherHandler(event) {
      ...
   }
}

然后，在您解析 data 属性并得到如下内容后：

data = {"eventListener" : "transitionend", "eventAction" : "showText"}

以这种方式绑定处理程序：

parentElement.addEventListener(
     data.eventListener,
     myActions[data.eventAction],
     false)

这不仅摆脱了 eval，而且有助于以更清晰的方式组织代码。

在事件侦听器中使用 eval(myFunctionName) 作为回调的替代方法是什么？

What is the alternative to using eval(myFunctionName) as a callback in an Event Listener?

javascript

eval

event-listener

addeventlistener