onclickは良くないのですか

Question

以前、こちらでJAVAScriptはonclickで動作すると
教えて頂き、a タグにそのように記述しています。

ところが、こちらのページでそれは宜しくないと
記述されており、大変衝撃を受けています。
http://d.hatena.ne.jp/HolyGrail/20080515/1210861489

質問１
aタグのonclickはプロの方はほとんど使ってないといいます。
やはり上記なような理由でよく使われてないのでしょうか。

質問２
JQueryを使った次のコードが紹介されていました。
どうもこれがベストな方法なようです。

$(document).ready(function(){
  $('#clickevent').click(function(){
    alert('clicked');
  });
})

alertのところにonloadで実行する関数を置けば
いいのかなと思います。
ただ、aタグで指定している<img>の設定がよくわかりません。
aタグのname属性なんかでidを指定するのでしょうか？

コードを変えてもいいのかすら検討ができていません。
ご教授のほどをお願いします。

Chaire · Accepted Answer

No.2 訂正。
> ハンドラに任意のパラメータを渡せるようになるまで

申し訳ない、ずっと前から渡せますね。ボケて別のとごっちゃにしてました。というわけで、まずは以下の形で覚えて下さい。

// ハンドラ関数内で使いたいデータがない場合
jQuery(document).on('click', 'a#clickevent', function (e) {
　var clicked = e.currentTarget;  // a#clickevent
});

// ハンドラ関数内で使いたいデータがある場合
jQuery(document).on('click', 'a#clickevent', { hoge: 1 }, function (e) {
　var clicked = e.currentTarget;  // a#clickevent
　var hoge = e.data.hoge;  // 1
});

なお、外部スクリプトは特に理由がなければ body の末尾で読み込んで下さい。head 内に置くのなら、可能な限り 1 個のファイルにまとめ、5 個も 6 個も読み込ませないようにして下さい。

taka451213 · Answer

こんにちは。

#2さんの回答が本格的なので、本来はそちらの路線で回答するべきなんですが、とりあえず続きを・・・と思いました。

＞<a href="javascript～ onclick ～><img ～></a>
これは、
<img ～ onclick="xxx();">
じゃダメなんですかね？
aタグで挟んでるのは、リンカにしたいから？
マウスポインターだけの問題なら、cssでも賄えますが・・・。

＞idを割り振ってclickeventの所に書けばいいのですか。
です。
#clickevent
これがエレメントのidを指定しています。
変更する場合は、両方合わせる必要があります。

＞ところで、これは<head>に外部ファイルで置けばいいですか。
外部ファイルでもいいです。
jqueryよりも後に読み込まれるように指定してください。

Chaire · Answer

> これがベストな方法なようですベストでないです。むしろ「やってはいけない」部類です。 jQuery を使うなら、今 1.7 が出ていますので、 jQuery(document).on('click', 'a#clickevent', function (e) { ... }); で覚えて下さい。もっとも、私は jQuery 自体を「まだ」お勧めしませんが（ハンドラに任意のパラメータを渡せるようになるまで）。 --- 何をやってはいけないかと言えば、「onload を待って getElementsByTagName() ないし getElementById() をして要素にハンドラを取り付ける」ことです。ではどうするか。click イベントはバブリングしますので、上位の要素で監視できます。　…… body 内で生じたクリックは全て拾える…… これだけです。いくつかの例外を除き、イベントハンドラは全部 body で監視できるのです。ですから、ぜひ onclick を使って下さい。ここから、document.addEventListener('click', ....); を使うことで、body から onclick を消すこともできます。それは次の段階です。なお、href="javascript:..." のように書くのは 20 世紀の遺物です（具体的には NN4）。忘れて下さい。

taka451213 · Answer

こんにちは。

何をやりたいのかが、よくわからないのですが・・・、
＞alertのところにonloadで実行する関数を
＞置けばいいのかなと思います。
onload()でやりたい事をonclick()にしちゃうんですか？
このコードは、onclick()のfunction()を準備しているだけですが・・・。

＞aタグで指定している<img>の設定がよくわかりません。
通常、onclick()で動かしたいエレメントに、id="clickevent"を指定すればよいです。

onclickは良くないのですか

No.2 訂正。

こんにちは。

この回答への補足

> これがベストな方法なようです

こんにちは。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング