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

由于要添加多个事件侦听器，因此您会看到该事件多次触发-每次requestData（）函数由于“ oninput”事件运行而运行一次。而且由于它上面的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>

addeventlistener甚至触发多次

1 个答案: