Question

写了一个超级基本脚本来试用addEventListener并且它不起作用......

为什么呢？

以下是代码：

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>

        <script>

            function validateMe(){

                document.getElementById("button1").addEventListener("click",validateForm); 

                function validateForm(){
                    alert("Wheeeeee!");
                }

                window.addEventListener("load",validateMe);

            }

        </script>
    </head>
    <body>

        <form name="" id="" action="" onsubmit="return validateMe">
                First Name: <input type="input" name="first_name" id="first_name" />
                <br /><br />
                Last Name: <input type="input" name="last_name" id="last_name" />
                <br /><br />
                Email Address: <input type="input" name="email" id="email" />
                <br /><br />
                <input type="submit" value="Validate" id="button1" />
        </form>

    </body>
</html>

Answer 1

您似乎正在尝试从函数本身添加函数。该函数不会被执行，因此不会被添加。尝试将addEventListener语句移到功能块之外。或者，使函数匿名并在addEventListener调用中声明它。

编辑：我现在看到它确实在提交时执行了。但是负载阶段已经过去了，因此在那时添加它不会做任何事情。

Answer 2

删除 validateForm（）。你在函数中有一个函数，它在任何地方都没有被调用。

        function validateMe(){

            document.getElementById("button1").addEventListener("click",validateForm); 


                alert("Wheeeeee!");


            window.addEventListener("load",validateMe);

        }

Answer 3

根据您的情况猜测，您可能希望使用addEventListener()而不是内联事件使用。

您可以从表单DOM中删除内联事件onsubmit="return validateMe"，然后需要调用您的window.addEventListener("load",validateMe)函数：

function validateMe(){  
  document.getElementById("button1").addEventListener("click",validateForm); 
  function validateForm(){
    alert("Wheeeeee!");
  }
}
window.addEventListener("load", validateMe);

JSfiddle Demo

addEventListener（）不工作 - 无法弄清楚原因

3 个答案: