Question

我有一些带有按钮的HTML，该按钮的POST事件触发了JavaScript函数。

当JavaScript函数是ES6模块函数时，我需要实现相同的行为。

我有一个简单的例子：

QWebEngineView

它也被复制在https://jsfiddle.net/avnerm/jho6qgLu/18/

单击 button1 时，将调用 js1.js 中的函数 myFunction1 ，并将传入的值正确打印到安慰。好！

但是当单击 button2 时，我收到一条消息：

ReferenceError：未定义Es6Module

在某些时候，我可以通过设置事件侦听器来触发模块功能（ button3 的用例），但是它现在不起作用，而且我不知道如何传递参数进入此实现中的功能。

就我而言，我需要能够传递参数。

如何从onclick属性调用ES6模块函数，并将参数传递给它？

编辑：
@CertainPerformance，我的原始html代码涉及jinja2，它跨越了3次代码（3组ID：1、2、3）

我使用了您的模式，它创建了3个带有3个事件侦听器的按钮（button1，button2，button3）。当我单击每个按钮时，我可以在日志中看到适当的组ID。

这完全适合我！

我只是想确认这是处理html，jinja2和es6的方法。

谢谢！

onclick

<head>
  <meta charset="utf-8">
  <script src="./js1.js"></script>
  <script type="module" src="./js2.js"></script>
  <script type="module">
    import { Es6Module3 } from "./js3.js";
    document.querySelector('#myFunction3').addEventListener('click', Es6Module3.myFunction3);
  </script>
</head>

<body>
  <button onclick="myFunction1(1)">button1</button>
  <button onclick="Es6Module2.myFunction2(2)">button2</button>
  <button type="button" id="myFunction3">button3</button>
</body>

Answer 1

唯一的方法是将导入的模块函数分配给window对象，以便内联处理程序可以引用它：

  <script type="module">
    import { Es6Module2 } from "./js2.js";
    window.Es6Module2 = Es6Module2;
  </script>

但这违反了模块的目的。

无论如何，都应使用内联处理程序never, ever。他们有太多问题，包括这一问题（要求调用的函数在全局范围内）。最好避免使用它们，而应使用addEventListener来正确添加侦听器。

如果要添加一个监听器，该监听器使用一个参数来调用函数，则只需在监听器中使用该参数来调用该函数：

import { fn } from './script.js';
document.querySelector('button').addEventListener('click', () => {
  fn('foo');
});

如何从onclick调用ES6模块功能

1 个答案: