javascript - 如何让 onclick 函数调用外部模块文件

Question

我有这个代码

<div class="signup">
    <h2 class="form-title" id="signup"><span>or</span>Sign up</h2>
    <div class="form-holder">
        <input type="text" class="input" placeholder="Name" />
        <input type="email" class="input" placeholder="Email" />
        <input type="password" class="input" placeholder="Password" />
    </div>
    <button onclick="signup(this)" class="submit-btn">Sign up</button>
</div>
<script type="module" src="/libs/ajax.js"></script>
<script type="module" src="/scripts/login.js"></script>

这里的onclick 不，我想调用login.js 文件中的函数signup

    import { Ajax } from '../libs/ajax.js'
    let signup = (e) =>{
        console.log(e)
    }

问题是，我使用 type="module"因为我想在该 js 文件中导入脚本。但是，通过分配类型模块，无法从 html 文件中找到该函数。如果我删除 import 并删除 type="module"它确实有效。

有没有办法从 onclick 绑定(bind)函数而不将我的函数分配给 window.范围 ？

Answer 1

Is there a way to bind a function from the onclick without assign my function to window. scope ?

没有。模块有自己的范围。除非您明确这样做，否则它们不会创建全局变量。

最好首先避免使用内部事件属性。从模块内部绑定(bind)您的事件处理程序。

let signup = event => {
    console.log(event.currentTarget);
};
document.querySelector('button').addEventListener("click", signup)