![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
以前、こちらでJAVAScriptはonclickで動作すると
教えて頂き、a タグにそのように記述しています。
ところが、こちらのページでそれは宜しくないと
記述されており、大変衝撃を受けています。
http://d.hatena.ne.jp/HolyGrail/20080515/1210861 …
質問1
aタグのonclickはプロの方はほとんど使ってないといいます。
やはり上記なような理由でよく使われてないのでしょうか。
質問2
JQueryを使った次のコードが紹介されていました。
どうもこれがベストな方法なようです。
$(document).ready(function(){
$('#clickevent').click(function(){
alert('clicked');
});
})
alertのところにonloadで実行する関数を置けば
いいのかなと思います。
ただ、aタグで指定している<img>の設定がよくわかりません。
aタグのname属性なんかでidを指定するのでしょうか?
コードを変えてもいいのかすら検討ができていません。
ご教授のほどをお願いします。
No.3ベストアンサー
- 回答日時:
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 個も読み込ませないようにして下さい。
何度も有り難うございます。
読み込むファイルはボタン操作用のjsファイル、
これが今あるものです。
それにjQueryと教えて頂いたコードで
3個のjsファイルになると思います。
ボタンはfooter部に置くように指導されたので
body部の一番下にあります。
<head>に置いてあるのは単に指導されたからです。
ひょっとして3つとも1番下に置いてもいいのでしょうか。
No.4
- 回答日時:
こんにちは。
#2さんの回答が本格的なので、本来はそちらの路線で回答するべきなんですが、とりあえず続きを・・・と思いました。
><a href="javascript~ onclick ~><img ~></a>
これは、
<img ~ onclick="xxx();">
じゃダメなんですかね?
aタグで挟んでるのは、リンカにしたいから?
マウスポインターだけの問題なら、cssでも賄えますが・・・。
>idを割り振ってclickeventの所に書けばいいのですか。
です。
#clickevent
これがエレメントのidを指定しています。
変更する場合は、両方合わせる必要があります。
>ところで、これは<head>に外部ファイルで置けばいいですか。
外部ファイルでもいいです。
jqueryよりも後に読み込まれるように指定してください。
再度のご回答有り難うございます。
imgでも大丈夫なんですか?
質問のリンク先ではonclick自体がよくないと
書かれているようですが。
私のはあちこちに書かれているやり方だったので
これが正統だと思いこんでいました。
クリックのハンドラ?とかいうコードを
<head>に置くこともできるようですね。
でも<body>の方がいいのでしょうか?
No.2
- 回答日時:
> これがベストな方法なようです
ベストでないです。むしろ「やってはいけない」部類です。
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_
またまた書き直しみたいです。
いつになったら完成するやらトホホです。
質問の方法もアウトだとは・・・。
上には上の世界があるものですね。
No.1
- 回答日時:
こんにちは。
何をやりたいのかが、よくわからないのですが・・・、
>alertのところにonloadで実行する関数を
>置けばいいのかなと思います。
onload()でやりたい事をonclick()にしちゃうんですか?
このコードは、onclick()のfunction()を準備しているだけですが・・・。
>aタグで指定している<img>の設定がよくわかりません。
通常、onclick()で動かしたいエレメントに、id="clickevent"を指定すればよいです。
どうも今日は。実はonloadにも記述があります。
そこは言葉の誤りなので置き換えて下さい。
やりたいことは
<a href="javascript~ onclick ~><img ~></a>
という一般的な形でimgにボタンの画像を置いてます。
idを割り振ってclickeventの所に書けばいいのですか。
だいたい分かってきましたよ。
ところで、これは<head>に外部ファイルで置けばいいですか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript javascriptで入力フォームが空欄の時にアラートによるエラーを出すコードを書いています。 2 2023/06/13 17:58
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ActiveXobjectが作成できない
-
【Tabキー】特定の範囲内だけで...
-
<a>タグのテキストを取得
-
Click回数を数え、規定された回...
-
RadioButtonListの表示制御
-
画像の一部を表示
-
問題はbind の付いたリスナーを...
-
javascriptであるボタンを押す...
-
idを使わずにonclickで自身の要...
-
二次元配列を使って順位をだす...
-
関数でy=g(x)のgとは何の略です...
-
乗換案内 VBAで操作したい
-
javascriptの基本的なことだと...
-
window.openでタイトル名の指定
-
Boolean型配列中のTrueの有無を...
-
JavaScriptで、現在日時から100...
-
同じIDで定義した要素の配列を...
-
Googleスプレッドシートとスク...
-
DOM要素を削除しても、イベント...
-
Javascriptで定期的にF5を押す...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<a>タグのテキストを取得
-
任意の座標をクリックさせるには
-
ActiveXobjectが作成できない
-
innerHTML実行後のイベント
-
Click回数を数え、規定された回...
-
HTML:Tableタグに対し、JavaScr...
-
JavaScriptでオブジェクトを取...
-
onchangeイベントを使ってspan...
-
【Tabキー】特定の範囲内だけで...
-
モーダルダイアログウィンドウ...
-
重複しないくじの作り方がわか...
-
javascript 特定のタグのidの存...
-
配列の大括弧と丸括弧はどう違う?
-
javascriptであるボタンを押す...
-
「nullまたはオブジェクトでは...
-
div要素内の全input要素をdisable
-
onclickを使わずにイベント処理...
-
画像上のクリックした場所が分...
-
RadioButtonListの表示制御
-
javascriptで自動計算フォーム...
おすすめ情報