たとえば「サブミット時に入力値の検証を行い、入力値に誤りがあった場合にはサブミット挙動をキャンセルしたい」ことがあります。
JavaScriptイベントハンドラの場合は戻り値としてfalseを返すことでイベント挙動をキャンセルできましたが、イベントリスナではfalseを返しても挙動をキャンセルすることはできません。
イベントリスナの場合にはpreventDefaultメソッドを挙動を使ってキャンセルします。
サンプルソースコード
<script type="text/javascript"> // ページロード時にのイベントリスナー関数を登録 window.addEventListener('load',function() { // <form id="fm">の「送信」時に実行されるイベントリスナを登録 document.getElementById('fm').addEventListener('submit',function(e) { if(!window.confirm('送信してもよろしいですか?')){ e.preventDefault(); } },false); },false); </script> <form id="fm" action="https://shiba-sub2.sakuraweb.com/Part3/form2.php" method="POST"> <label>名前<input type="text" name="myName" size="15"/></label> <input type="submit" value="送信" /> </form>