Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
118
Help us understand the problem. What is going on with this article?

More than 5 years have passed since last update.

@smzk

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

  • 処理がほぼ同じだけど微妙に違う、みたいなパターンをどう書くか。
  • 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
118
Help us understand the problem. What is going on with this article?