お問い合わせ
    氏名

    メールアドレス

    件名

    お問い合わせ内容



    会員登録(無料)
    ログイン
    スキルアップは今すぐこちら!▶

    【JavaScript】.addEventListener() とは?

    JavaScript(ジャバスクリプト)
    この記事は約3分で読めます。

    JavaScriptを学んでいると「.addEventListener()」がよく出てきますが、よく分からなかったので・・・メモ。

    .addEventListener() 

    addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。

    https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

    ちょっとこれだけでは、よく分からなかったので・・・実際に使ってみます。

    .addEventListener() の使い方

    下記が基本の使い方です。

    要素.addEventListener( 種類, 関数, false )

    例えば、このように使えます。IDのBtnSampleがクリックされた時にaddEventListenerが発火して、かつ「functionSample1」の関数が実行されるようになります。

    const btnclick = document.getElementById("BtnSample");
    btnclick.addEventListener("submit", functionSample1);

    このような感じで、送信ボタンをクリックするとアラートが表示されます。

    <form id="BtnSample">
    <button type="submit">送信</button>
    </form>
    
    <script>
    const btnclick = document.getElementById("BtnSample");
    btnclick.addEventListener("submit", functionSample1);
    
    function functionSample1(){
    alert("ボタンが押されました");
    }
    </script>

    表示されました!

    主に使われるイベントリスナー

    submit以外にも、色々な引数を指定することができます。下記が主に使われるイベントリスナーです。

    引数イベントタイミング
    loadページの読み込みが完了した
    clickクリックした
    mousedownマウスのボタンが押下された
    mouseupマウスのボタンを離した
    mouseoverカーソルがターゲットに入った
    mousemoveカーソルがターゲット内を動いた
    mouseoutカーソルがターゲットの外に出た
    loadページの読み込みが完了した
    scrollスクロールした
    resizeブラウザのウィンドウサイズが変更された
    submitフォームを送信した
    change要素の値が変更になってフォーカスが外れた
    keyupキーを離した
    keydownキーを押した
    keypressキーを押した
    input値を入力した
    selectテキストの選択をした

    これらをうまく使うと「○○した時に○○を実行する」といった処理をさせることが可能になります。便利ですね!

    まとめ

    .addEventListener() の使い方でした。使い方次第でいろいろなことができそうです。

    ご参考ください😃

    ▶サンプルページはこちら

    https://js.eguweb.jp/412/

    0 件のコメント

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