addEventListener メソッドで使用できるイベントハンドラー（イベントタイプ）のうち、代表的なものをカテゴリ別に紹介します。一部を除き、実装例も載せました。また、個人的に違いが分かりにくいものについては後半で簡単解説も。
マウスイベント：10個
マウスのクリックや移動に伴って発火するイベントタイプです。
各ボタン毎に異なるイベントタイプをセットしており、ダイアログが表示されます。
click要素がクリックされたときdblclick要素がダブルクリックされたときmousedownマウスボタンが押されたときmouseupマウスボタンが離されたときmousemoveマウスがボタン上を移動したときmouseoverマウスがボタンの上に移動したときmouseoutマウスがボタンの上から離れたときmouseenterマウスがボタン要素に入ったときmouseleaveマウスがボタン要素から出たときcontextmenuコンテキストメニューが開かれたとき（右クリック）
JavaScript コード（HTML / CSSコードは未掲載）
document.getElementById('c-click').addEventListener('click', () => {
alert('clickボタンがクリックされました。');
});
document.getElementById('c-dblclick').addEventListener('dblclick', () => {
alert('dblclickボタンがダブルクリックされました。');
});
document.getElementById('c-mousedown').addEventListener('mousedown', () => {
alert('mousedownボタン上でマウスボタンが押されました。');
});
document.getElementById('c-mouseup').addEventListener('mouseup', () => {
alert('mouseupボタン上でマウスボタンが離されました。');
});
document.getElementById('c-mousemove').addEventListener('mousemove', () => {
alert('マウスがmousemoveボタン上を移動しました。');
});
document.getElementById('c-mouseover').addEventListener('mouseover', () => {
alert('マウスがmouseoverボタンの上に移動しました。');
});
document.getElementById('c-mouseout').addEventListener('mouseout', () => {
alert('マウスがmouseoutボタンの上から離れました。');
});
document.getElementById('c-mouseenter').addEventListener('mouseenter', () => {
alert('マウスがmouseenterボタン要素に入りました。');
});
document.getElementById('c-mouseleave').addEventListener('mouseleave', () => {
alert('マウスがmouseleaveボタン要素から出ました。');
});
document.getElementById('c-contextmenu').addEventListener('contextmenu', () => {
alert('contextmenuボタン上でコンテキストメニューを開きました。');
});clickとmousedownはイベント発生のタイミングが異なる
どちらもマウス操作（クリック）に関連するイベントですが、発生タイミングやマウスボタンの種類（左・中・右）が異なります。
click-
マウスボタンが押されて離れたとき。（クリック操作が完了したとき。）
通常は左マウスボタンのみに対応する。 mousedown-
マウスボタンが押されたとき。
どのマウスボタン（左・中・右）でもイベントが発生する。
mouseover/mouseout と mouseenter/mouseleaveはバブリングの有無が異なる
どちらもマウス操作（移動）に関連するイベントですが、mouseover/mouseoutはバブリングし、mouseenter/mouseleaveはバブリングしないという点が異なります。
mouseover/mouseout-
イベントはバブリングし、要素とその子要素に対して発生する。
mouseenter/mouseleave-
イベントはバブリングせず、要素自体に対してのみ発生する。
バブリング（イベントバブリング）とは、イベントが最も深いネストされた要素（ターゲット要素）から始まり、親要素に向かって段階的に伝播していく仕組みを指します。（反対に、イベントが親要素から始まってターゲット要素に伝播していく仕組みを「キャプチャリングフェーズ」といいます。）
例）
<div id="parent">
<button id="child">Click</button>
</div>
<script>
document.getElementById('parent').addEventListener('click', () => {
console.log('Parent clicked');
});
document.getElementById('child').addEventListener('click', () => {
console.log('Child clicked');
});
</script>ここで「Click」ボタンをクリックすると、まずターゲット要素のイベントconsole.log('Parent clicked');が発生し、次に親要素のイベントconsole.log('Parent clicked');が発生します。このようにイベントが伝播する仕組みを「バブリング」といいます。
キーボードイベント：3個
キーボードを押したり離したりすることに伴って発火するイベントタイプです。
各フォームに異なるイベントタイプをセットしています。各フォームにフォーカスされている状態でキーボードを操作すると、ダイアログが表示されます。
keydownキーが押されたときkeyupキーが離されたときkeypress特定のキーが押されたとき※将来的に廃止予定のため非推奨
JavaScript コード（HTML / CSSコードは未掲載）
document.getElementById('c-keydown').addEventListener('keydown', () => {
alert('keydownボタン上で何らかのキーが押されました。');
});
document.getElementById('c-keyup').addEventListener('keyup', () => {
alert('keyupボタン上で何らかのキーが離されました。');
});
document.getElementById('c-keypress').addEventListener('keypress', () => {
alert('keypressボタン上で何らかのキーが押されました。');
});keydownとkeypress は対象となるキーとタイミングが異なる
どちらもキーボード操作に関するイベントですが、イベント発生の対象となるキーとタイミングが異なります。
keydown-
すべてのキーに対して発生し、キーが押されている間継続的に発生する
keypress-
文字キーに対してのみ発生する。（修飾キー：Shift、Ctrl、Altなどやファンクションキー：F1-F12、矢印キー、変換を伴う入力には発生しない。）
フォームイベント：6個
フォームを送信したり入力したりすることで発火するイベントタイプです。
各フォームに異なるイベントタイプをセットしており、それぞれのフォームで特定の操作を行うとダイアログが表示されます。
submitフォームが送信されたときresetフォームがリセットされたときchange入力内容が変更されたときinput入力内容が変更されたときfocusフォームがフォーカスされたときblurフォームがフォーカスから外れたときJavaScript コード（HTML / CSSコードは未掲載）
document.getElementById('c-submit').addEventListener('submit', () => {
event.preventDefault();
alert('フォームが送信されました。');
});
document.getElementById('c-reset').addEventListener('reset', () => {
alert('フォームがリセットされました。');
});
document.getElementById('c-change').addEventListener('change', () => {
alert('入力内容が変更されました。');
});
document.getElementById('c-input').addEventListener('input', () => {
alert('入力されました。');
});
document.getElementById('c-focus').addEventListener('focus', () => {
alert('フォームがフォーカスされました。');
document.getElementById('c-focus').blur(); // フォーカスを外す（外さないと無限ループになる）
});
document.getElementById('c-blur').addEventListener('blur', () => {
alert('フォームがフォーカスから外れました。');
document.getElementById('c-blur').blur(); // フォーカスを外す（外さないと無限ループになる）
});changeとinput はイベント発生のタイミングが異なる
どちらもインプット要素の値が変化したときに発生するイベントタイプですが、そのタイミングが異なります。
change-
値を変更して確定したタイミング（フォーカスが外れたタイミング）で発生する。
input-
値を変更/入力/削除したタイミングで発生する。（編集中でも発生する。）
inputは、ユーザーが入力している途中で何かを実行したい場合に使用します。リアルタイムの入力チェックや、入力内容に基づいてインタラクティブなフィードバックを提供したい場合などに使用します。
ウィンドウイベント：4個
load-
ページが完全に読み込まれたとき
unload-
ページがアンロードされたとき
resize-
ウィンドウのサイズが変更されたとき
scroll-
ウィンドウまたは要素がスクロールされたとき
こちらの実装例はありません。
タッチイベント（モバイルデバイス向け）：4個
touchstart-
タッチが開始されたとき
touchmove-
タッチが移動したとき
touchend-
タッチが終了したとき
touchcancel-
タッチがキャンセルされたとき
タッチイベントについては、以下記事で実装例などを詳しく紹介しています。（本記事での実装例や解説は省略します。）
その他のイベント：7個
DOMContentLoaded-
HTML文書の完全な読み込みと解析が終わったとき
transitionend-
CSSトランジションが終了したとき
animationend-
CSSアニメーションが終了したとき
dragstart-
要素のドラッグが開始されたとき
drag-
要素がドラッグされているとき
dragover-
要素がドラッグされている要素の上にあるとき
drop-
ドラッグされた要素がドロップされたとき
こちらの実装例はありません。