Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
16
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@mikakane

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")

1行めが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分などで画面上様々な箇所で処理を行いたい場合
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
16
Help us understand the problem. What are the problem?