- ベストアンサー
onclickは良くないのですか
- aタグのonclickはプロの方はほとんど使ってないといいます。やはり上記なような理由でよく使われてないのでしょうか。
- JQueryを使った次のコードが紹介されていました。どうもこれがベストな方法なようです。alertのところにonloadで実行する関数を置けばいいのかなと思います。ただ、aタグで指定している<img>の設定がよくわかりません。aタグのname属性なんかでidを指定するのでしょうか？
- コードを変えてもいいのかすら検討ができていません。ご教授のほどをお願いします。
- uzume_z
- お礼率87% (396/452)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
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 個も読み込ませないようにして下さい。
その他の回答 (3)
- taka451213
- ベストアンサー率47% (436/922)
こんにちは。 #2さんの回答が本格的なので、本来はそちらの路線で回答するべきなんですが、とりあえず続きを・・・と思いました。 ＞<a href="javascript～ onclick ～><img ～></a> これは、 <img ～ onclick="xxx();"> じゃダメなんですかね？ aタグで挟んでるのは、リンカにしたいから？ マウスポインターだけの問題なら、cssでも賄えますが・・・。 ＞idを割り振ってclickeventの所に書けばいいのですか。 です。 #clickevent これがエレメントのidを指定しています。 変更する場合は、両方合わせる必要があります。 ＞ところで、これは<head>に外部ファイルで置けばいいですか。 外部ファイルでもいいです。 jqueryよりも後に読み込まれるように指定してください。
お礼
再度のご回答有り難うございます。 imgでも大丈夫なんですか？ 質問のリンク先ではonclick自体がよくないと 書かれているようですが。 私のはあちこちに書かれているやり方だったので これが正統だと思いこんでいました。 クリックのハンドラ？とかいうコードを <head>に置くこともできるようですね。 でも<body>の方がいいのでしょうか？
補足
取り敢えず色々と教えて頂いたので 整理するために一旦締めます。
- Chaire
- ベストアンサー率60% (79/130)
> これがベストな方法なようです ベストでないです。むしろ「やってはいけない」部類です。 jQuery を使うなら、今 1.7 が出ていますので、 jQuery(document).on('click', 'a#clickevent', function (e) { ... }); で覚えて下さい。もっとも、私は jQuery 自体を「まだ」お勧めしませんが（ハンドラに任意のパラメータを渡せるようになるまで）。 --- 何をやってはいけないかと言えば、「onload を待って getElementsByTagName() ないし getElementById() をして要素にハンドラを取り付ける」ことです。 ではどうするか。click イベントはバブリングしますので、上位の要素で監視できます。 <body onclick=" var target = event.target || event.srcElement; // クリックされた最深の要素 if (target.tagName === 'A') { if (target.id === '#clickevent') { // クリックされたのは A#clickevent } } "> …… body 内で生じたクリックは全て拾える…… </body> これだけです。いくつかの例外を除き、イベントハンドラは全部 body で監視できるのです。ですから、ぜひ onclick を使って下さい。 ここから、document.addEventListener('click', ....); を使うことで、body から onclick を消すこともできます。それは次の段階です。 なお、href="javascript:..." のように書くのは 20 世紀の遺物です（具体的には NN4）。忘れて下さい。
お礼
ご回答有り難うございます。 href="javascriptは良くないのですねorz_ またまた書き直しみたいです。 いつになったら完成するやらトホホです。 質問の方法もアウトだとは・・・。 上には上の世界があるものですね。
- taka451213
- ベストアンサー率47% (436/922)
こんにちは。 何をやりたいのかが、よくわからないのですが・・・、 ＞alertのところにonloadで実行する関数を ＞置けばいいのかなと思います。 onload()でやりたい事をonclick()にしちゃうんですか？ このコードは、onclick()のfunction()を準備しているだけですが・・・。 ＞aタグで指定している<img>の設定がよくわかりません。 通常、onclick()で動かしたいエレメントに、id="clickevent"を指定すればよいです。
お礼
どうも今日は。実はonloadにも記述があります。 そこは言葉の誤りなので置き換えて下さい。 やりたいことは <a href="javascript～ onclick ～><img ～></a> という一般的な形でimgにボタンの画像を置いてます。 idを割り振ってclickeventの所に書けばいいのですか。 だいたい分かってきましたよ。 ところで、これは<head>に外部ファイルで置けばいいですか。
お礼
何度も有り難うございます。 読み込むファイルはボタン操作用のjsファイル、 これが今あるものです。 それにjQueryと教えて頂いたコードで 3個のjsファイルになると思います。 ボタンはfooter部に置くように指導されたので body部の一番下にあります。 <head>に置いてあるのは単に指導されたからです。 ひょっとして3つとも１番下に置いてもいいのでしょうか。