如何从onclick调用ES6模块函数
我有一些带有onclick事件触发JavaScript函数的按钮的HTML。
当JavaScript函数是ES6模块函数时，我需要实现相同的行为。
我有一个简单的例子：
<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>
它也在https://jsfiddle.net/avnerm/jho6qgLu/18/上复制
单击button1时，将调用js1.js中的函数myFunction1，并将传入的值正确地打印到控制台中。好的!
但是，当单击button2时，我会收到一条消息：
ReferenceError:未定义Es6Module
在某种程度上，我能够通过设置一个事件侦听器触发一个模块函数(button3的用例)，但是它现在不起作用了，而且我不知道如何在这个实现中将一个参数传递给函数。
在我的例子中，我需要能够传递一个参数。
如何从onclick属性调用ES6模块函数，并将一个参数传递给它？
编辑：
@CertainPerformance，我最初的html代码涉及jinja2，它跨越代码3次(3组ids: 1、2、3)
我使用了您的模式，它用3个事件侦听器创建了3个按钮(button1、button2、button3)。当我单击每个按钮时，我可以在日志中看到适当的组id。
这对我来说是完美的！
我只想确认这是处理html、jinja2和es6的方法。
谢谢!
class Es6Module2 {
static myFunction2 = function(val) {
console.log('BEG myFunction2');
console.log('val');
console.log(val);
};
};
export { Es6Module2 };{% block content %}
<div class="admin-view-groups">
{% for group in groups %}
<button id="button{{group.id}}">Download Group</button>
<script type="module">
import { Es6Module2 } from './Es6Module2.js';
document.querySelector('#button{{group.id}}').addEventListener('click', () => {
Es6Module2.myFunction2({{ group.id }});
});
</script>
{% endfor %}
</div>
{% endblock %}
回答 1
Stack Overflow用户
发布于 2020-05-26 22:34:27
唯一的方法是将导入的模块函数分配给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');
});https://stackoverflow.com/questions/62032401
复制相似问题
腾讯云开发者
