独自イベントを作って、ライブラリ側で発火させて、アプリ側ではそこでハンドリングしたくなるよね。
それをやってみようってことですね。
パターン１：イベントオブジェクトにパラメータをセットする
- eventsample.js（ライブラリ側）
(function($) { // ボタンをクリックしたらイベントを発火させる // こんな程度ならクリックイベントで実装した方が早いわけだが・・・ $('#button').click(function(ev) { // イベントオブジェクトを作る。イベント名と、パラメータを設定する。 var event = new $.Event('hoge', {color: 'red', message: 'Yes!!'}); // イベントを発火させる $('div').trigger(event); }); })(jQuery);
- eventsample.html（アプリ側）
<!DOCTYPE html> <html> <head> <title>独自イベントサンプル</title> <script type="text/javascript" src="js/jquery-1.7.2.js" ></script> </head> <body> <button id="button">ボタン</button> <div id="message1" style="width:100px;height:100px;border:solid 1px #000000;"></div> <div id="message2" style="width:100px;height:100px;border:solid 1px #000000;"></div> <script> (function() { // div#message1だけにイベントハンドラを設定する $('#message1').on('hoge', function(ev) { $(ev.currentTarget) // パラメータはイベントオブジェクトに設定されている .css('background-color', ev.color) .text(ev.message); }); })(); </script> </body> </html>
パターン２：イベント発火の時にパラメータをセットする
- eventsample.js（ライブラリ側）
(function($) { // ボタンをクリックしたらイベントを発火させる // こんな程度ならクリックイベントで実装した方が早いわけだが・・・ $('#button').click(function(ev) { // イベントオブジェクトを作る。イベント名のみ設定する。 var event = new $.Event('hoge'); // パラメータを与えてイベントを発火させる $('div').trigger(event, {color: 'red', message: 'No!!!!'}); }); })(jQuery);
- eventsample.html（アプリ側）
<!DOCTYPE html> <html> <head> <title>独自イベントサンプル</title> <script type="text/javascript" src="js/jquery-1.7.2.js" ></script> </head> <body> <button id="button">ボタン</button> <div id="message1" style="width:100px;height:100px;border:solid 1px #000000;"></div> <div id="message2" style="width:100px;height:100px;border:solid 1px #000000;"></div> <script> (function() { // div#message1だけにイベントハンドラを設定する $('#message1').on('hoge', function(ev, data) { $(ev.currentTarget) // パラメータは第２引数に設定されている .css('background-color', data.color) .text(data.message); }); })(); </script> </body> </html>
パターン１と２とどちらでも良いと思います。
けれども、パターン１だとイベントオブジェクトを汚す可能性があるので、パターン２の方がいいんじゃないかなと思います。両方に設定しておく方がひょっとしたら親切なのかも知れませんが、混乱を招く可能性も否定できませんね。
