「aタグのhref要素でjavascript」より「jQueryでイベント発火」

公開日:2018-10-18
最終更新:2018-10-24

前書き

意外にこんなことをわざわざ書いている記事はなかったので書いてみる。 私のググり力がゴミクズである可能性は大いにある。 (というか、英語サイトは見てもいない、、、、) 調査はガバガバなので真実は10%ぐらいと思って流し読んでください。 そのうちちゃんと調査します。(多分)

aタグのhref要素にjavascriptの関数へのリンクが書いてあった

<script>
function hoge() {
  console.log("hogehuga");
}
</script>
・・・
・・・
<a href="javascript:hoge()">HogeHuga</a>

後輩さんの書いたHTMLをレビューしているとこんな記述があった。 マウスポインタをリンクに当てるとおもむろにブラウザ下部にあるアドレスバーに「javascript:hoge()」が表示される。

そうした理由は些細なことだったりする

  • hrefに指定するとハイパーリンクになって色々見た目の調整とかいらなくなる
  • クリックイベントとるのめんどくさい
  • そういう風に書いてあるのを見たことがある

ぐらいだと思う。本人に確認をとったわけではないので憶測でしかないわけだが。

だったらjQueryでイベントとったほうが良くない?

自分がそういう風にしか書いてこなかったし、aタグ方式はなんとなくマズそうな気がした。以下の3点。

理由1 なんとなくクリックした時の動作が遅い

1に関しては リンク形式でjavascriptを実行する際は本当にページにアクセスしているのではないかという仮説を立てた。流石にページの内容全てを実行することはないと思うが動作の遅さ的にそれに近い何かはやってそうな気がした。 あと遅さゆえになんどもクリックできてしまう。

理由2 アドレスバーに関数名が表示されるのなんか怖い

2に関しては 私がきちんとjavascriptの力を理解していないのでなんとも言えないし、検証ツールとかで見ればどうせすぐ判明するものでもある。ただ、何も知らない人が見た時にホバーしたら英語の良くわからん単語が表示されたりしたら恐怖なんじゃね?とは思う。少なくともうちの親父(60半ば)は「これなんや」とは聞いてくる気がする。

理由3 構造と振る舞いは分けろっていう風潮あるやん?

技術ブログとか色々徘徊していると口すっぱく構造と振る舞いは分けろって言われている気がする。ほんと耳(目?)にタコができるぐらい。MVCがとかも高頻度で目にする(ここでMVCという単語を使うとMVC警察に無期懲役くらいそうで怖い)。 確かにきちんと分けておくとメリットは感じる時のほうが多い。難しくもないしできるだけ守っていきたいとも思う。

結論

javascriptはhrefではなくきちんとクリックイベントをとったりした上で発火させたほうがトータル的に良さそう。

// jQuery使いですまんな。
// 本当はアローで書きたいんやけど。。
$('.btnHuga').on('click', function() {
  hoge();
)}

あとがき

Qiitaにはとても書けないけど、本当に自分のメモとして書かせて欲しいからQrunchに書きました。

記事が少しでもいいなと思ったらクラップを送ってみよう!
36
+1
@mkaku'の技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする