addEventListener onSubmitフォームを使用して

私はHTMLとJavaScriptのかなり新しいです。以下はサンプルコードです。以下のコードブロックは、formタグの属性addEventListener onSubmitフォームを使用して

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Custom Tags</title> 
</head> 

<body> 

    <form id="form1" action="#" onsubmit="functSubmit()"> 
    <label for="input1">This text will be passed in CustomeEvent</label> 
    <input id="input1" type="text" value="default"> 
    <input type="submit" id="bt1"> 
    </form> 

    <script> 
    function functSubmit(event) { 

     var msg = document.getElementById("input1").value; 
     alert(msg); 
    } 
    </script> 

</body>  
</html>

としてのonSubmitで正常に動作します。しかし、私はaddEventListenerをして、コードの下に書くとき（）それは動作しません。

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Custom Tags</title> 
</head> 

<body> 

    <form id="form1" action="#"> 
    <label for="input1">This text will be passed in CustomeEvent</label> 
    <input id="input1" type="text" value="default"> 
    <input type="submit" id="bt1"> 
    </form> 

    <script> 
    document.getElementById("form1").addEventListener('submit', functSubmit(event)); 

    function functSubmit(event) { 
     var msg = document.getElementById("input1").value; 
     alert(msg); 
    } 
    </script> 

</body> 
</html>

誰でもaddEventListenerが機能しない理由を説明できますか？

出典

2016-06-16 user2206366

これは、すぐにイベントリスナーのコールバックを呼び出すためです。それを呼び出すことなく、関数を引数として渡すだけです。フォームが送信されるたびに、その関数にイベントオブジェクトが渡されます。サイドノートでは

document.getElementById("form1").addEventListener('submit', functSubmit); 
 

 
function functSubmit(event) { 
 
    var msg = document.getElementById("input1").value; 
 
    alert(msg); 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Custom Tags</title> 
 
</head> 
 

 
<body> 
 

 
    <form id="form1" action="#"> 
 
    <label for="input1">This text will be passed in CustomeEvent</label> 
 
    <input id="input1" type="text" value="default"> 
 
    <input type="submit" id="bt1"> 
 
    </form> 
 

 
</body> 
 

 
</html>

：それは一般的に、あなたのJavaScriptから、あなたのHTMLの懸念を分離するために、より良い習慣です。属性のイベントハンドラをインライン展開すると、2つの別々の懸案事項が結合されます。保守性のために、ハンドラを個別に管理してください。また、イベント委任を活用する利点もあります。

出典

2016-06-16 00:08:36 Seth

functSubmitを呼び出して、その結果をaddEventListner関数に渡します。

代わりにあなたがこの

<form id="form1" action="#" onsubmit="functSubmit()">

または

eventような何かをしたいが、既にfunctSubmit関数の呼び出し側によって渡されます。

出典

2016-06-16 00:09:48 fxfilmxf

文字列を関数名として渡すことしかできないと思います。試すことができます

document.getElementById("form1").addEventListener('submit', function(event){ 
    functSubmit(event); 
});

出典

2016-06-16 00:12:35 Nitin

addEventListener onSubmitフォームを使用して

答えて

関連する問題