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

Programming

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

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

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

こんな場合に使用

  • ユーザーの操作がした時に処理したい

難易度(MAX10)★★★★★☆☆☆☆☆

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

ユーザーの操作が起こった時に処理する方法は、先述でも書いたとおり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が楽しくなると思います。
頑張って理解しましょう。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました