form エレメントで onsubmit を発火させる方法は次の二種類があり、この二つに優先度があるのか気になったので調査した結果
<input type="submit" /><button />
- 結論から言うと優先度はなく、エンターキーを押したときは記述順で動作する
サンプルコード
- 以下の 3 つのフォームではそれぞれ最も最初に宣言されたボタンの
onclick がエンターキー押下時に発火し、その次に form の onsubmit が発火する
- 当然ボタンが直にクリックされたときはクリックされたボタンの
onclick が発火し、その次に form の onsubmit が発火する
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Example of Button priority</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
const onFormSubmit = (ev) => {
ev.preventDefault();
console.log('onFormSubmit', ev);
};
const onButtonClick = (ev, name) => {
console.log('onButtonClick', ev, name);
};
</script>
</head>
<body>
<fieldset>
<legend>BUTTON ON FIRE</legend>
<form action="." method="POST" onsubmit="onFormSubmit(event)">
<input type="text" />
<button onclick="onButtonClick(event, 'BUTTON')">BUTTON</button>
<input
type="submit"
value="SUBMIT_INPUT"
onclick="onButtonClick(event, 'SUBMIT_INPUT')"
/>
</form>
</fieldset>
<fieldset>
<legend>FIRE ON SUBMIT_INPUT</legend>
<form action="." method="POST" onsubmit="onFormSubmit(event)">
<input type="text" />
<input
type="submit"
value="SUBMIT_INPUT"
onclick="onButtonClick(event, 'SUBMIT_INPUT')"
/>
<button onclick="onButtonClick(event, 'BUTTON')">BUTTON 1</button>
</form>
</fieldset>
</body>
</html>
Lycolia 
