Avn*_*itz 3 html javascript ecmascript-6
我有一些带有按钮的 HTML，其onclick事件触发 JavaScript 函数。
当 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/
当点击按钮1，功能myFunction1在js1.js叫，那就是在传递的值是正确打印到控制台。好的！
但是当单击button2 时，我收到一条消息：
参考错误：Es6Module 未定义
在某些时候，我能够通过设置事件侦听器来触发模块函数（button3的用例），但它现在不起作用，我不知道如何在此实现中将参数传递给函数。
就我而言，我需要能够传入一个参数。
如何从 onclick 属性调用 ES6 模块函数，并将参数传递给它？
编辑：
@CertainPerformance，我的原始 html 代码涉及 jinja2，它跨越代码 3 次（3 个组，id：1、2、3）
我使用了你的模式，它创建了 3 个按钮（button1、button2、button3）和 3 个事件侦听器。当我点击每个按钮时，我可以在日志中看到相应的组 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 %}唯一的方法是将导入的模块函数分配给 window 对象，以便它可以被内联处理程序引用：
<script type="module">
import { Es6Module2 } from "./js2.js";
window.Es6Module2 = Es6Module2;
</script>
但这违背了模块的目的。
无论如何，永远不应该使用内联处理程序。他们有太多的问题，包括这个问题（要求调用的函数在全局范围内）。最好避免它们并改用它们addEventListener，以正确添加侦听器。
如果你想添加一个监听器来调用一个带参数的函数，那么只需在监听器中调用带参数的函数：
import { fn } from './script.js';
document.querySelector('button').addEventListener('click', () => {
fn('foo');
});
| 归档时间： |
|
| 查看次数： |
1687 次 |
| 最近记录： |