読者です 読者をやめる 読者になる 読者になる

@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

jQueryで独自イベントを作るよ

jQuery

独自イベントを作って、ライブラリ側で発火させて、アプリ側ではそこでハンドリングしたくなるよね。
それをやってみようってことですね。

パターン1:イベントオブジェクトにパラメータをセットする

  • 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>

パターン2:イベント発火の時にパラメータをセットする

  • 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)
              // パラメータは第2引数に設定されている
              .css('background-color', data.color)
              .text(data.message);
        });
      })();
    </script>
  </body>
</html>

パターン1と2とどちらでも良いと思います。
けれども、パターン1だとイベントオブジェクトを汚す可能性があるので、パターン2の方がいいんじゃないかなと思います。両方に設定しておく方がひょっとしたら親切なのかも知れませんが、混乱を招く可能性も否定できませんね。