javascript - 送信ボタンにイベントを追加

Question

私はこのjsコードでjsの勉強を始めたばかりです

<div class="container">    
    <form name="myForm" action="#"  method="post">
        First name: <input type="text" name="fname">
        <input type="submit" value="Submit" id="smit">
    </form> 

  <script>
var smit=document.getElementById("smit");
smit.addEventListener("click",formvalidate(),false); 

function formvalidate(){

    console.log(" vua moi click submit");

    if(t==null){
        var t= document.forms["myForm"]["fname"].value;
        if(t==null || t==""){
             alert("xin dien vao email");

        }
    }

}
</script>

ブラウザでプレビューすると、送信ボタンをクリックしなくてもアラートポップアップが自動的に表示されます。誰かが私に何が起こっているのか説明してもらえますか？ありがとう。

Answer 1

関数名の後の括弧により、関数はすぐに呼び出されます。イベントリスナーとして割り当てるだけなので、渡す必要があります。

括弧を削除すると、クリックを待ってから実行されます。

smit.addEventListener("click", formvalidate, false);
//                                        ^^ No parentheses

Answer 2

IEでも機能するように、少し変更を加えました。

<form name="myForm" id="myForm" action="#"  method="post">
    First name: <input type="text" name="fname" id="fname">
    <input type="submit" value="Submit" id="smit">
</form>

<script >
function formvalidate(event){
//removed console log because that only works in ie
// when debugging
    var t= document.getElementById("fname").value;
    if(t==""){
       alert("xin dien vao email");
       if(event.preventDefault){ event.preventDefault()}; 
       if(window.event){window.event.returnValue = false;}
    }
}
var smit=document.getElementById("myForm");
if(smit.addEventListener){
    smit.addEventListener("submit",formvalidate,false);
}else{
    //ie doesn't have addEventListner
    smit.attachEvent('onsubmit', formvalidate);
}
</script>

Answer 3

次のように、formvalidateから括弧を削除します。

smit.addEventListener("click",formvalidate(),false); 

に

smit.addEventListener("click",formvalidate,false); 

参照：addEventListener

Answer 4

イベントリスナーには括弧が含まれておらず、削除されます。括弧を追加すると、関数のように見えますが、ここではイベントリスナーを割り当てる必要があります。

smit.addEventListener("click",formvalidate,false);