ユーザー操作が起こった時に処理する方法【adEventListener】

今回はJavaScriptでユーザーの操作が起こった時に処理を行う方法を紹介します。

WEBサイトでは様々なイベントがあります。
中でもユーザーがクリック、タップ、スクロールを行った時に処理が開始されるイベントは殆どのWEBサイトに存在するのではないでしょうか？

この様なイベントと言われるものはJavaScriptが大きく関わってきています。
そこで今回はJavaScriptのメソッドである「adEventListener」を使ってユーザーの操作に応じて処理を行う様にするプログラムの作り方を紹介します。

ユーザーの操作が起こった時に処理する方法

ユーザーの操作が起こった時に処理する方法は、先述でも書いたとおりadEventListenerを使用します。

adEventListenerを使用すると、イベント発生時に呼び出す関数を指定できます。
イベント発生時に呼び出す関数は以下のように様々です。

通常

const btn01 = document.querySelector('.btn01');
btn01.addEventListener('click', onclickBtn01);
function onclickBtn01() {
    console.log('ボタンがクリックされました。')
}

省略

const btn01 = document.querySelector('.btn01');
btn01.addEventListener('click', function() {
    console.log('ボタンがクリックされました。');
});

アロー関数の場合

const btn01 = document.querySelector('.btn01');
btn01.addEventListener('click', () => {
    console.log('ボタンがクリックされました。');
});

1行目のconst btn01 = document.querySelector(‘.btn01’);ではHTML部分のclass=”btn01″をconst btn01に中に入れています。なので実質HTMLでのclass=”btn01″にJSの動作が入っている事にもなります。

上記のJSが正常に動いていれば以下のGIF動画のように動きます。（右下のコンソール部分に注目）

この記述の「console.log」部分を何かしら動作する関数内の記述を入れていけばボタンクリック後にその動作が行われます。

以上が「ユーザーの操作が起こった時に処理する方法【adEventListener】」でした。

ここを理解できると一気にやれる事が増えるので、これから先のJavaScriptが楽しくなると思います。
頑張って理解しましょう。