[jQuery] $(‘form’).change()でフォーム全体の変更を監視する

jQueryのchange()メソッドは、フォーム要素の値に変更があった時、それを察知して反応します。inputやtextarea、selectにバインドして使うことがほとんどだと思います。

<form action='#' method='post'>
  フルネーム<input type='text' name='fullname'>
  パスワード<input type='password' name='pass'>
  <input type='submit'>
</form>
<script>
$("input[name=fullname]").change(function(){
  //フルネーム欄が変更されると発火
});
$("input[name=password]").change(function(){
  //パスワード欄が変更されると発火
});
</script>

しかし、change()メソッドはformタグそのものにもバインドが可能です。formにバインドすると、フォーム内の要素に加えられた変更をすべて察知することができます。

<form action='#' method='post'>
  フルネーム<input type='text' name='fullname'>
  パスワード<input type='password' name='pass'>
  <input type='submit'>
</form>
<script>
  $("form").change(function(){
    //フォーム内の要素に変更があると発火
  });
</script>

しかし、このままでは、フォーム内のどの要素に変更が加えられたかを知ることができません。そこで、以下のようにすることで、changeメソッドが反応するきっかけとなった要素を知ることができます。

<form action='#' method='post'>
	フルネーム<input type='text' name='fullname'>
	パスワード<input type='password' name='pass'>
	<input type='submit'>
</form>
<script>
$("form").change(function(e){
  var target = $( e.target )
  if( target.attr('name') === 'fullname' ){
    //フルネーム欄の変更があった際の処理
  }elseif( target.attr('name') === 'password' ){
    //パスワード欄の変更があった際の処理
  }
});
</script>

change()に渡したイベントオブジェクトのe.targetが変更のあったDOMエレメントなので、これを8行目でjQueryオブジェクト化し、変数targetに代入しています。target.attr('name')でname属性が分かるので、これで変更のあった要素が特定できるというわけです。