为什么表单.submit（）在使用jQuery时有效，但在使用vanilla JS时无效？

Question

我正在从我的JavaScript中删除所有jQuery（这被建议最大化速度）并且有一个最终问题。目标是在提交时运行loadData函数。

运行我的脚本时，这有效：

$('#form-container').submit(loadData);

但这并不是：

 clickContainer = document.getElementById('form-container');
 clickContainer.addEventListener('submit', loadData());

如何在vanilla JS中使用提交的信息运行我的loadData函数？

完整代码@ https://github.com/ChaMbuna/Marvel-Map

谢谢！

Answer 1

解决方案：问题将函数传递给Javascript addEventListener

传递addEventListener函数名，而不是函数的返回值。这样做：

clickContainer.addEventListener('submit', loadData);

当提交事件触发时，将{1}}要执行的函数的名称传递给addEventListener。立即将括号附加到函数名称会导致函数执行，并且返回的函数将被传递给addEventListener方法而不是函数本身。

例外情况是函数loadData实际返回了一个函数，并且希望在提交时触发返回函数。在这种情况下，您需要像loadData中那样执行loadData()。啊，JavaScript之美。