[ js ]jQueryのonとtriggerを使って記述を分離

今さらだけど
jQueryのonとtriggerを使うと必要な処理をエレメントごとに記述できてコードがすっきりするらしい
と知ったのでメモ。

jQueryオブジェクト.on( イベント名, ファンクション )で、jQueryで取得したエレメントにイベント名の処理を追加して、
jQueryオブジェクト.trigger( イベント名 )はイベントを発火させるらしい。

参考サイト
.on() | jQuery API Documentation http://api.jquery.com/on/
.trigger() | jQuery API Documentation http://api.jquery.com/trigger/

イベント名には、clickとかmousemoveとか通常よくつかわれると思うイベント名の他、自作のイベント名も指定できるみたいで、その際はtriggerを使って発火させる。
当たり前だけど、イベント名がclickとかmousemoveの場合はtriggerを使わなくても発火される。

例
数字を入力してaddボタンを押すと、すぐ下にその個数分のテキストボックスのリストを追加する処理を、ボタンに対する処理とリスト追加の処理を分離した感じで書いてみた

• 1
• 2

上記のコード
●addボタンには(66行目から)、入力データ取得して数字確認。数字だったら背景黒の部分へ個数を通知(73行目)
●背景黒のulには(76行目から)、通知された数字の個数分テキストボックスのリストを追加

<style>
div#r, div#r * {
 margin: 0;
 padding: 0;
}
div#r {
 background: #ccc;
 width: 400px;
 color: #fff;
}
div#s {
 width: 400px;
 padding: 10px 0;
}
div#s input {
 margin: 0 5px;
}
div#s .n, div#s .add {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 font-size: 1.2em;
 padding: 0 10px;
}
div#t {
 width: 400px;
 background: #000;
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}
div#t li {
 margin-top: 10px;
 list-style: none;
}
div#t li:last-child {
 margin-bottom: 10px;
}
div#t input {
 font-size: 150%;
 padding: 4px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
}
</style>

<div id="r">
<div id="s">
<input type="number" value="" name="n" class="n"><input type="button" name="add" class="add" value="add">
</div>
<div id="t">
 <ul>
  <li>1<input type="text"></li>
  <li>2<input type="text"></li>
 </ul>
</div>
</div>

<script>
$( function() {
 var $btn = $( 'div#s > input.add' );
 var $lst = $( 'div#t > ul' );
 var lst_n = $lst.children().length;

 $btn.on( 'click', function( e ){
  var n = $( this ).prev().val();
  if( n === '' || !!isNaN( n ) ){
   alert( '数字を入力してください' );
   return false;
  }

  $lst.trigger( 'listAdd', n );
 } );

 $lst.on( 'listAdd', function( e, n ) {
  for( ; n > 0; n-- ){
   $( this ).append( '<li>' + ( ++lst_n ) +  '<input type="text" /></li>' );
  }
 } );
} );
</script>

この程度だと分ける意味も無いと思うけど、ちょっとMVCっぽい？