javascript - 如何使用 javascript 从内联 onclick 事件获取参数，以便在 JS 文件中使用它们

Question

我有一个内联点击事件，如下所示:

<a href="#" class="nextStep" onclick="formHandler.changeStep(2, 'nameYourReport'); return false;">

这个 onclick 基本上将表单滑动到下一步，效果很好。我的问题是，如果用户单击 Enter 键，我也想滑动表单，并且在实际 JS 组件文件中获取 ChangeStep 函数的正确参数时遇到问题，因为它们通常是根据实际 HTML 中的硬编码值拉入的.

所以我的问题是，有没有一种方法可以从外部 js 文件中提取或运行确切的函数并输入 keydown。

我的想法是在类处于事件状态时获取字段集(父级)。然后获取类为“nextStep”的 a 标签。然后运行附加到该元素的函数。

所以我已经从 HTML 中获得了该函数，现在将其作为变量:

var parent = document.querySelectorAll('.fieldsetParent.active')[0],
    clickable  = parent.getElementsByClassName("nextStep")[0],
    changeStep = clickable.getAttribute('onClick')
         .replace('formHandler.', '')
         .replace(' return false;', '');

但是当我调用应该输出函数的变量并理论上运行它所等于的函数时，它不会运行。

Answer 1

您应该在 JavaScript 中使用 addEventListener，而不是在 HTML 中使用内联 onclick。示例:

clickable.addEventListener('click', function () {
  event.preventDefault()
  formHandler.changeStep(2, 'nameYourReport')
})

这样，如果需要，您可以在其他地方调用 formHandler.changeStep()。

document.addEventListener('keypress', function (ev) {
  if (ev.key === "Enter") {
    event.preventDefault()
    formHandler.changeStep(2, 'nameYourReport')
  }
})

您不能简单地从 HTML 中提取该函数，因为属性是字符串而不是实时代码。