Umbrella - にほんご。

on

更新日: 2018-02-09

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

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


パラメータ

name1, name2, nameN..: string
clicksubmitchange等のイベント名を指定します。
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
上記と同様です。
.on('event1', callback)
.on('event1 event2 eventN', callback)
.on('event1,event2,eventN', callback)
.on(['event1', 'event2', 'eventN'], callback)
.on('event1', 'selector', callback)

戻り値

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します。
  ajax(u(this).attr('action'), 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 type="text">
<span id="demo_txt"></span>

関連項目

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

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

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



© 2014 Francisco Presencia Released under the MIT license

このコンテンツはFrancisco Presencia(franciscop)によるUmbrella JSドキュメントを翻訳/改変したものです。