かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

jQuery .triggerと.onとで実行される関数へのデータの渡し方の違いメモ。

オブジェクトのイベントを呼出して、オブジェクト自身をイベント内で使いたい時とかのメモ

.trigger

.trigger( eventType [, extraParameters ] )

extraParameters
Type: Array or PlainObject
Additional parameters to pass along to the event handler.
.trigger() | jQuery API Documentation

呼び出されるイベントの第二引数以降でデータを受取ることができる。

ex

配列で渡す場合

var $d = $(document);

$d.on('trigger_event', function(evt, param1, param2) {
  console.log( param1, param2 ); // => 'foo', 'bar'
});

// 発火
$d.trigger('trigger_event', ['foo', 'bar']);

オブジェクトで渡す場合

var $d = $(document);

$d.on('trigger_event', function(evt, data) {
  console.log( data.flg ); // => true
});

// 発火
$d.trigger('trigger_event', {flg: true});

.on

.on( events [, selector ] [, data ], handler )

data
Type: Anything
Data to be passed to the handler in event.data when an event is triggered.
.on() | jQuery API Documentation

呼び出されるイベントでは event.data で受取ることができる。

ex

var myObj = {
  dispatchEventListener: function(evt) {
     console.log( evt.data.self); // => myObj
  }
};

var $d = $(document);
$d.on('dispatch_event', {self: myObj}, myObj.dispatchEventListener);

// 発火
$d.trigger('dispatch_event');

.trigger と .on 両方からデータを渡す

データの渡し方が異なるので両方からデータを渡せば、オブジェクトの外からオブジェクトの中の関数に値を渡せたりします。

var MyObj = function() {
  var self = this;
  $(document).on('dispatch_event', {self: self}, self.dispatchEventListener);
  return this;
}

MyObj.prototype.dispatchEventListener = function(evt, data) {
  console.log( evt.data.self); // => [MyObj]
  console.log( data.flg ); // => true
};

var myObj = new MyObj();

// 発火
$(document).trigger( 'dispatch_event', {flg: true} );

わーい!

初めてプログラミングを書きはじめたのがAS(ActionScript)だったので、そこでなんとなく覚えた EventDispatcher 的な書き方に影響されている気がします。EventDispatcher と EventListener の定義の違いの理解があやふやですが…

久しぶりにコーディングのお仕事でjQuery触ったら、やっぱりすごく忘れてて予想外に時間がかかってしまった。。。orz
どうせまた忘れるだろうからメモをしました。やはり日々の触れてるって継続が大切でなのすね…


[参考]

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発