click イベント・addEventListener
click イベントはマウスのカーソルが要素の上にある状態で、マウスが押されたあとで離された時に発生するイベントです。
onclick 属性または onclick プロパティに対してイベントハンドラを設定できます。
また、addEventListener メソッドの引数として click を指定してイベントリスナーを登録もできます。
・onclick 属性
要素の属性値にイベントハンドラを登録する場合は onclick 属性を使用します。
・htmlファイル
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Basics</title>
</head>
<body>
<h1>Event</h1>
<button onClick="alert('クリックした！');">クリックして！</button>
<script src="app.js"></script>
</body>
</html>
※斜体にした部分がonclick 属性の記述です。
実際にボタン「クリックして！」を押すと、アラートでclick イベントが実行されています。
これでも問題ないですが、HTMLが読みづらくなるデメリットがあります。またボタンを複数作成する場合や、click イベントで違う処理をしたい時など、記述量も増え大変になってきます。
そこでおすすめなのがonclick プロパティです。
・onclick プロパティ
DOM を使って取得した要素のプロパティにイベントハンドラを登録する場合は onclick プロパティを使用します。プロパティを使用する場合は、無名関数またはアロー関数式で記述できます。
・htmlファイル
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Basics</title>
</head>
<body>
<h1>Event</h1>
<button onClick="alert('クリックした！');">クリックして！</button>
<button id="v2">クリックして（v2）</button>
<script src="app.js"></script>
</body>
</html>
・jsファイル
const btn = document.querySelector('#v2');
btn.onclick = function () {
console.log('クリックした！');
console.log('ほげほげ');
}
・addEventListener メソッド
第1 引数に反応したいイベント名（今回は 'click' ）を、第2引数に実行したい処理を記述します。
・jsファイル
const btn3 = document.querySelector('#v3');
btn3.addEventListener('click', function () {
alert('クリック！！！');
});
「v3」ボタンを押すと、
クリックしたらアラートが出る処理が実行されています。
また、複数の関数を一つのイベントに割り当てることも可能です。
}
function moge() {
console.log('moge');
}
const hogemogeButton = document.querySelector('#hogemoge');
hogemogeButton.addEventListener('click', moge);
上記のように複数の処理を簡単に追加してくれます。
そして他にも様々なイベントの処理があります。
