LoginSignup
118

More than 5 years have passed since last update.

jqueryで同じようなイベント処理のまとめ方

Posted at
  • 処理がほぼ同じだけど微妙に違う、みたいなパターンをどう書くか。
  • 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が役に立つので、覚えておいて損はないかと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
118