「要素クリックで画面遷移」のよりよい書き方

Question

初歩的な質問で恐縮なのですが、理由が明確に言語化できず、もやもやしています。

trをクリックした際に、(hoge/:id)に遷移する、という要件があるとします。

<!-- #1 -->
<tr onclick="window.location='hoge/1'">...</tr>

<!-- #2 -->
<tr data-href="hoge/1">...</tr>
...
<script>
  $('tr[data-href]').on('click', function(){
    window.location = $(this).attr('data-href');
  });
</script>

上記のどちらでも実現はできますが、#2のほうが、感覚的によいのでは？と感じています。
ただ、あくまでも感覚で、それが何故なのかを言語化できずにもやもやしています。
＃1、＃2のどちらかのほうがよい理由、あるいはどちらでも構わない理由に関して、
知見を伺えますと幸いです。

---

編集リクエストを頂いたので、(:id)に関して追記を致します。

<table>
  <% fugas.each do |fuga| %>
    <%= content_tag('tr', data: {href: hoge_path(fuga.id)}) do %>
      ...
    <% end %>
  <% end %>
</table>

Ruby(Rails)にはなるのですが、idは動的に決まるというイメージです。

どうぞよろしくお願いいたします。

Comments

[m.ts10806]

その:idはどのように決まるのでしょうか。上から連番でしょうか。
もう少し構造がわかるHTMLをご提示ください。

[m.ts10806]

※正直どちらでも要件満たせていて問題ないので回答しづらいのは確かです

[m.ts10806]

Ruby On Railsをタグに追加しておいてください。

Answer 1

相違点がいくつかあるので、そこは分けて考えるべきかな、とは思いますが、個人的にはonclick属性の使用には消極的です。

Only one onclick handler can be assigned to an object at a time. You may prefer to use the EventTarget.addEventListener() method instead, since it's more flexible.

GlobalEventHandlers.onclick - Web APIs | MDN

勝手訳「onclickハンドラは一つのオブジェクトにひとつだけ割り当てができます。代わりにEventTarget.addEventListener() メソッドを利用した方が、より柔軟性があります。」

原因は、<input onclick="list()"> がinput要素 の list属性 を参照してしまうためです。

JavaScript - input要素のonclickなどのイベントハンドラからグローバルな関数 list にアクセスできない件｜teratail

Comments

[maki_k]

回答ありがとうございます！
JavaScriptのイベントハンドラと<script>タグでの記述って何が違うのか、というのが気になっていたので、
まさしくひとつ教えて頂いた気持ちです。

追加質問で恐縮なのですが、
> 相違点がいくつかあるので
いくつか、のうちのひとつが教えて頂いたリンクの内容だと思うのですが、
想定されている相違点を(参照リンクとかで構いませんので、もしあれば…！！！)教えて頂けると大変幸いです！

[Lhankor_Mhy]

・jQuery使用の有無。
・URLをスクリプト内に書くか、HTMLに書くか。
が異なると思います。

[maki_k]

なるほど、ありがとうございます！

Answer 2

今のところどっちでも問題はなく、理由としては「結果が同じだから」くらいでしかないですが、
もし効率的に書きたいなら「hoge/」は固定のようなので#2ではわざわざ渡さなくて良いかと。:id部分だけ渡す感じですね。

Comments

[maki_k]

編集リクエスト、回答ありがとうございます！
FWの記載なく失礼しました。確かにhtmlだけみるとそうですね！
`hoge_path(id)`で渡す関係上、`hoge/`から記載しておりました。

Answer 3

なんかおかしい

  $('tr[data-href]').on('click', function(){
    location.href = $(this).data('href');
  });

Comments

[maki_k]

確かにその通りですね！ご指摘ありがとうございます。