addeventlistener甚至觸發多次

Question

我正在嘗試將事件添加到頁面上的表單中。 問題在於，在第一次單擊時，事件將觸發兩次，然后觸發三次，然后繼續。 同樣，在加載后，innerHTML也不會被替換。 我很確定這是由於多事件觸發。

        <form name="search" id="getForm" oninput="requestData();">
            Search customer:<br>
            <input type="text" name="user" id="name"><br>
            <input type="submit" value="submit">
        </form> 
    </div>

<script>
function requestData(){

    document.getElementById('getForm').addEventListener('submit', ev);

    function ev(e){
        e.preventDefault();

        var user = document.getElementById('name').value;
        if (user !== ""){
            var url = 'http://localhost:3000/users/'+user;
            var xhttp;
            if (window.XMLHttpRequest){
                xhttp=new XMLHttpRequest();
            }
            else{
                xhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.onprogress = function(){
                //this will print out on the 3rd ready state
                //good for if the application is hanging
            }

            xhttp.onload = function() {
                if (this.status == 200 || this.status == 304) {
                    var response = JSON.parse(xhttp.responseText);
                    var output = '';
                    if(response.data[0] != null){
                        for(var i in response.data){
                            output += '<ul>' +
                            '<li>Name: '+response.data[i].customer_name+'</li>' +
                            '<li>Parent: '+response.data[i].parent+'</li>' +
                            '</ul>';
                            }
                            document.getElementById('customer_name').innerHTML = output;
                    }
                    else {
                        alert('Customer does not exist.');
                    }
                }
            }

            xhttp.onerror = function(){
                console.log('Request error...');
            }

            xhttp.open("GET", url, true);
            xhttp.send();
        } else {
            alert("Name must be filled out");
            return false;
        }
        document.getElementById('getForm').removeEventListener('submit', ev);
    }
}
</script>```

Answer 1

您會看到事件多次觸發，因為您要添加多個事件偵聽器-每次由於“ oninput”事件而運行requestData（）函數時，都會偵聽一次。 由於其上面的else { ... return...塊，因此removeEventListener命令不會觸發。

但是我根本看不出為什么根本需要“ oninput”事件。 除了添加越來越多的事件偵聽器之外，它什么也沒做。 您可以直接聲明提交事件，而無需此額外層：

    <form name="search" id="getForm">
        Search customer:<br>
        <input type="text" name="user" id="name"><br>
        <input type="submit" value="submit">
    </form> 
</div>

<script>
document.getElementById('getForm').addEventListener('submit', ev);

function ev(e){
    e.preventDefault();

    var user = document.getElementById('name').value;
    if (user !== ""){
        var url = 'http://localhost:3000/users/'+user;
        var xhttp;
        if (window.XMLHttpRequest){
            xhttp=new XMLHttpRequest();
        }
        else{
            xhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhttp.onprogress = function(){
            //this will print out on the 3rd ready state
            //good for if the application is hanging
        }

        xhttp.onload = function() {
            if (this.status == 200 || this.status == 304) {
                var response = JSON.parse(xhttp.responseText);
                var output = '';
                if(response.data[0] != null){
                    for(var i in response.data){
                        output += '<ul>' +
                        '<li>Name: '+response.data[i].customer_name+'</li>' +
                        '<li>Parent: '+response.data[i].parent+'</li>' +
                        '</ul>';
                        }
                        document.getElementById('customer_name').innerHTML = output;
                }
                else {
                    alert('Customer does not exist.');
                }
            }
        }

        xhttp.onerror = function(){
            console.log('Request error...');
        }

        xhttp.open("GET", url, true);
        xhttp.send();
    } else {
        alert("Name must be filled out");
        return false;
    }
}
</script>

這是一個最小化的工作演示，以演示實際中事件處理的一部分：

 document.getElementById('getForm').addEventListener('submit', ev); function ev(e) { e.preventDefault(); console.log(document.getElementById('name').value); } 

 <form name="search" id="getForm"> Search customer:<br> <input type="text" name="user" id="name"><br> <input type="submit" value="submit"> </form>