オブジェクトのイベントを呼出して、オブジェクト自身をイベント内で使いたい時とかのメモ
.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 inevent.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
どうせまた忘れるだろうからメモをしました。やはり日々の触れてるって継続が大切でなのすね…
[参考]
- .on() | jQuery API Documentation
- jQuery#onを便利に使う - Qiita
- .trigger() | jQuery API Documentation
- .trigger() | jQuery 1.9 日本語リファレンス | js STUDIO
初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発
- 作者: Ethan Brown,武舎広幸,武舎るみ
- 出版社/メーカー: オライリージャパン
- 発売日: 2017/01/20
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る