Question

我确定我错过了一些显而易见的东西，但任何想法为什么以下的addEventListener代码都在触发（不仅仅是在提交按钮上）？

HTML：

    <form action="#">
        <input type="text"><br>
        <input type="text"><br>
        <button id="submit">submit</button><br>
    </form>

JS：

    function validate () {
        var inputs = document.getElementsByTagName('input');
        var inputs_length = inputs.length-1;
        for (i=0; i<=inputs_length; i++) {
            var inputs_value = document.getElementsByTagName('input')[i].value;
            if (inputs_value == "") {
                alert('there is a text box empty');
            }
        }

    }   

    var el = document.getElementById('submit');

    if (el.addEventListener) {  
        el = addEventListener('click', validate, false);   
    } else if (el.attachEvent)  {  
      el.attachEvent('onclick', validate);  
    }

固定正在改变

el = addEventListener('click', validate, false);

要

el.addEventListener('click', validate, false);

我的TYPO :(

Answer 1

改变这个：

if (el.addEventListener) {  
    el = addEventListener('click', validate, false);

对此：

if (el.addEventListener) {  
    el.addEventListener('click', validate, false);

Answer 2

冗长的评论。

在您的代码中：

    // inputs is an HTMLCollection of all the inputs
    var inputs = document.getElementsByTagName('input');

    // No need for the -1
    var inputs_length = inputs.length;

    // Don't forget to declare counters too, very important
    // Just use < length
    for (var i=0; i<inputs_length; i++) {

        // Instead of this very inefficient method
        var inputs_value = document.getElementsByTagName('input')[i].value;

        // use the collection you already have
        var inputs_value = inputs[i].value;

        if (inputs_value == "") {
            alert('there is a text box empty');
        }
    }

最好在开始时声明inputs_value，以便所有声明都在一个地方，但正如你所说的那样无害。

哦，并且不要给表单元素一个名称或id为“submit”（或任何其他表单方法），因为它会影响同名的表单方法，因此无法调用它。

javascript addEventListener触发所有元素

2 个答案: