Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.
  • 処理がほぼ同じだけど微妙に違う、みたいなパターンをどう書くか。
  • 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が役に立つので、覚えておいて損はないかと思います。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした