on

.on(event1, event2, eventN.., callback)

イベントがトリガーされた時に関数を呼び出します。

.on('event1', callback)
.on('event1 event2 eventN', callback)
.on('event1,event2,eventN', callback)
.on(['event1', 'event2', 'eventN'], callback)
.on('event1', 'selector', callback)

パラメータ

name1, name2, nameN..: string

clickやsubmit、change等のイベント名を指定します。

callback: function

イベントが呼ばれた時にトリガーする関数です。 以下のパラメータを受け取ります。
function(e, data1, data2, ..., dataN)

• e : トリガーされたイベント。 いくつか面白いプロパティがあります。
  • e.currentTarget : イベントをトリガーした要素。
  • e.preventDefault() : ブラウザがデフォルトのアクションを実行しないようにします。
  • e.details : この関数が渡された時にtrigger()に渡されたパラメータです。
• data1, data2, dataN... : 関数が呼ばれた時にtrigger()に渡されたパラメータです。

この他に、イベントを委譲する方法もあります。 パラメータは以下のとおりです。

event1, event2, eventN..: string

上記と同様です。

selector: string

マッチした要素にトリガーさせるCSSセレクタです。

callback: function

上記と同様です。

戻り値

u

Umbrellaのインスタンスを返します。

例

ajaxを使って10秒ごとに自動保存する機能です。

// 'button.test"がクリックされた時にalertで'test'と表示します。
u('button.test').on('click', function(e) {
  alert("Test");
});

// Ajaxを通してフォームを送信します。
u('form.test').on('submit', function(e){

  // 通常のSubmitを防止
  e.preventDefault();

  // ajaxを通してSubmitします。
  fetch(u(this).attr('action'), { body: u(this).serialize(), ... });
});

// 'onchange'のより良い方法
u('input').on('change click blur paste', function(){
  console.log("Maybe changed");
});

デモ

テキストボックスに文字を入力すると、右に入力した文字列を表示します。

JavaScript

u('#demo input').on('change click blur paste', function(e){
  u('#demo_txt').html(e.currentTarget.value);
});

HTML

<input id="demo" type="text">
<span id="demo_txt"></span>

関連項目

.handle() .on()と同様ですがe.preventDefault()を実行します。

.trigger() マッチした全ての要素のイベントを呼び出します。

.off() マッチした要素からイベントを削除します。