javascript - 加载页面但未发生事件时执行的事件侦听器函数

问题描述

我是 Web 开发的新手。这是我的第一个问题。提前致谢。我正在尝试使用 JS 和 PHP 创建一个简单的登录表单。我发现如果我在 JS 中使用window.onload，事件侦听器回调函数会在不提交表单的情况下执行。这似乎很不合逻辑。JS 链接添加到页脚而不是页眉。

部分代码如下。

HTML

<div class="container justify-content-center" >
    <div class="ht-100"></div>

    <div class="d-flex">

        <div class="flex-grow-1 flex-shrink-1"></div>        

        <div>           
            <form name="login_form" id="login_form">
            
            <div class="mb-3" style="width:400px">
                <label for="email" class="form-label">Email address</label>
                <input type="email" class="form-control" name="email" id="email" required>
                
            </div>
            <div class="mb-3" style="width:400px">
                <label for="password" class="form-label">Password</label>
                <input type="password" class="form-control" name="password" id="password" required>
                
            </div>
            
            <button type="submit" class="btn btn-primary" name="login-button" id="login-button">Login</button>

            <div class="mt-3">
            <a href="" class="" >Forgot your password?</a>
            <br>
            <br>
            <a href="register.php" class="" >Have not registered yet?</a>
            </div>
            </form>
            
        </div>
        
        <div class="flex-grow-1 flex-shrink-1"></div>        

    </div>
    
</div>

function login_handler(){
    document.getElementById("login-button").addEventListener("click", login()); 
    
    function login(){   
            
        var data = new FormData();
        data.append('email', document.getElementById('email').value);
        data.append('password', document.getElementById('password').value);
        // alert(document.getElementById('password').value);

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "login_handler.php",true);
        console.log("step1");

        xhr.onload = function (){

            console.log("step2");

            if(this.response == 'ok'){
                console.log("step3");
                
            
            }
            else{
                console.log("step4");
            }
        }
    xhr.send(data);  
    };
    };
    window.onload = function(){
    
        login_handler();
    };

标签： javascript

javascript - 加载页面但未发生事件时执行的事件侦听器函数

问题描述

解决方案

推荐阅读