clickイベントの他に下記のようなイベントもあります。
①change フォームの要素(input, select等)の内容が変更された時に発火されるイベント
element.addEventListener(‘change’, function( ) {
console.log(‘changed!’);
});
②keydown キーボードのキーが押された時に発火するイベント
element.addEventListener(‘keydown’, function() {
console.log(‘pressed down!’);
});
③mouseover 要素にマウスが重なった時に発火するイベント
element.addEventListener(‘mouseover’, function() {
console.log(‘Mouse is over !’);
});
④submit フォームが送信された時に発火するイベント
formElement.addEventListener(‘submit’, function(e) {
e.preventDefault();
console.log(‘Form was submitted!’);
});
赤字は<form>
タグが送信されると、通常はページがリフレッシュされますが、preventDefault()
を使用するとそのリフレッシュをキャンセルできます。