以前、こちらで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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<a>タグのテキストを取得
-
重複しないくじの作り方がわか...
-
JavaScriptのメモ帳アプリ編集...
-
タブ画像を切り替えてクッキー保存
-
リンクを新しい窓で開きたい
-
ホームページ内でのRSS表示の方法
-
jsファイルを使用して計算した...
-
配列の大括弧と丸括弧はどう違う?
-
クリックを押した時にリンク先...
-
関数でy=g(x)のgとは何の略です...
-
複数ファイルで使うグローバル...
-
ジェネレーターの作り方
-
Linux バイナリ実行できない "...
-
C#で、ContextMenuStripに動的...
-
gas スプレッドシートがアクテ...
-
ローカルにあるファイルを検索...
-
functionから別のfunctionを実...
-
同じIDで定義した要素の配列を...
-
idを使わずにonclickで自身の要...
-
ぷよぷよの消去アルゴリズムが...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ActiveXobjectが作成できない
-
<a>タグのテキストを取得
-
重複しないくじの作り方がわか...
-
任意の座標をクリックさせるには
-
javascriptでCSVを呼出しvlookup
-
innerHTML実行後のイベント
-
HTML:Tableタグに対し、JavaScr...
-
onchangeイベントを使ってspan...
-
WordPressのコンタクトフォーム...
-
appendChildがieだとできない??
-
配列の大括弧と丸括弧はどう違う?
-
JavaScriptでオブジェクトを取...
-
【Tabキー】特定の範囲内だけで...
-
div要素内の全input要素をdisable
-
問題はbind の付いたリスナーを...
-
モーダルダイアログウィンドウ...
-
テキストボックスがブランクの...
-
javascript 特定のタグのidの存...
-
日本語入力の禁止
-
javascriptで編集可能不可能の...
おすすめ情報