jQuery イベントについてのまとめ

イベントの設定

onで設定

$(".link").on("click",(e)=>{
    ...
})

動的に生成される要素への予約的なバインドは、docuemnt へのonで処理する。

$(document).on('click', '.link',  (e) => {
    ....
});

クリックなどのイベントはカーソル操作等で自動的に呼び出されるほか、triggerを使って呼び出す事も出来る。

$(".link").trigger("click");
// $(".link").click() と書くことも出来る。

trigger には第二匹数以降でパラメータを渡す事が出来る。これはon側でe以降の引数として取得できる。

$(".link").trigger("click","hoge","fuga");

イベントオブジェクト

イベント系関数から取得できるイベントオブジェクト e の仕様は以下に

よく使うものを紹介

event.currentTarget

バブリングフェーズにおける現在のDOM。要は this 的なモノ

preventDefault()

DOMのデフォルトの挙動をストップさせる。

フォームの送信ボタンやa要素等でよく利用する。

stopPropagation()

下層のDOMにイベントが伝搬するのを防ぐことが出来る。

イベント名前空間

jQueryではイベントに名前空間をセット出来る。

$('.link').on('click.myevent', (e) => { 
    ....
});

コレは click -> myevent と階層的に解釈されるのでなく、HTMLのクラスのような複合的な解釈がされる。

なので例えばoffなどを用いてバインドを解除する場合、以下の様な記述が使える。

$(".link").off("click.myevent")
$(".link").off(".myevent")

１行めがclick.myeventを削除するのに対し2行目は.myevent全てを削除する形で動作する。

Triggerで使う場合は以下の様な感じ。ちょっと挙動を理解してないと辛いかも。

$(".link").on("click.hoge.piyo",function(e){
    ....
})

$(".link").on("click.hoge",function(e){
    ....
})

$(".link1").on("click",function(e){
    $(".link").trigger(".hoge"); // not fire!
    $(".link").trigger("click.hoge"); // fire both!
    $(".link").trigger("click.hoge.piyo"); // fire only first one!
})

カスタムイベント

clickやmouseenterのようなユーザイベントとは別に内部処理用のカスタムイベントを定義する事も可能。

$(window).on('myEvent', function(e,data) {
    ....
});

実行は普通にtriggerでOK

$(window).trigger('myEvent',{});

サイト全体に大きな影響を及ぼすような変更などはカスタムイベントで実行させると便利。

• APIで定期的にセッションチェックを行い,セッションアウト時に様々な処理を行いたい場合
• 時報的に00分などで画面上様々な箇所で処理を行いたい場合