- 処理がほぼ同じだけど微妙に違う、みたいなパターンをどう書くか。
- if文書いたら負けかなと思っている。
すべて個別に書く
<a href="/aaa" id="eventA">aaa</a>
<a href="/bbb" id="eventB">bbb</a>
$('#eventA').on('click', function(){
console.log('Aが押された');
});
$('#eventB').on('click', function(){
console.log('Bが押された');
});
メリット
- わかりやすい
デメリット
- 冗長
使いどころ
- イベント発火点が固定（増えない）の時
- 同じように見えるけど、別の処理の時
備考
- これはまとめたと言わない
要素自身に（data）属性を持たせる
<a href="/aaa" class="event" data-hoge="A">aaa</a>
<a href="/bbb" class="event" data-hoge="B">bbb</a>
$('.event').on('click', function(){
console.log($(this).data('hoge') + 'が押された');
});
メリット
- メソッドが1つになった
- 仮に
/cccが増えてもjs側の修正が不要
デメリット
- HTMLへの記述が多くなる
- その都度要素への参照が必要になる
使いどころ
- イベント発火点が固定ではない（複数ある）時
- イベント発火点に関連した何かをしたいとき
備考
-
<a href="/aaa" class="event" hoge="A">aaa</a>
として、$(this).attr('hoge')でも取れますが、突然謎の属性が現れると混乱するので、data-xxxにしておくのが良いと思います。 -
また、data()メソッドの利点として、
data-hoge='{"a":"123"}'のようにJSONを指定すれば、オブジェクトで取得できるので、複数の値を渡したくなってもそのままで使えます。
イベントセット時に値を持たせる
- on()の引数でfunctionの前にオブジェクトを渡すと、
event.dataで後から参照できるようになります。 - 文字列で渡してしまうとセレクタ扱いになるので、文字列以外で渡してください。（セレクタも渡せばdataは文字列で渡せます）
<a href="/aaa" class="eventA">aaa</a>
<a href="/bbb" class="eventB">bbb</a>
var handleClick = function(event){
console.log(event.data.name + 'が押された');
}
$('.eventA').on('click', {name: 'A'}, handleClick );
$('.eventB').on('click', {name: 'B'}, handleClick );
メリット
- jsだけで完結する（HTMLに不要なデータを持たせたなくても良い）
デメリット
- jsへの記述が多くなる
使いどころ
-
イベントセットする時点で、渡すべき値をjsが知っている時
または、jsだけが知っていれば良い時 -
HTMLを自由にできない（変更できない）時
まとめ
- 適材適所だと思いますが、HTMLを変更（追加）する修正や、要素に連動した処理をすることが多いと思うので、
data-xxxのパターンを良く使います。 - HTMLを変更できず、data属性を付けることができない時等に、
event.dataが役に立つので、覚えておいて損はないかと思います。