- ベストアンサー
onclickとaddEventListener
HTML５でスマホアプリを作っているのですが、 「ボタンなどが押された時にある処理を行わせたい」という時に <a>タグの中に「onclick="save()"」という様なやり方と idを指定して「document.getElementById("省略").addEventListener("click",save(),false);」 という様なやり方もあると思うのですが、 この２つの違いって何かあるのでしょうか？？ どっちを使っても同じものなんでしょうか？ お教え頂けると幸いです。
- zukky_saito
- お礼率34% (9/26)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
どちらも最終的な動きは同じですが、HTML内にJavascriptを書くのは良くないと言われる場合もあるので、後者が最近の主流ではないかと思います。
関連するQ&A
- addEventListenerで
window.addEventListener("load", addEvents, false); function addEvents() { for (var i = 0; i < 3; i++) { document.getElementById("hoge" + i).addEventListener("click", function() { check(i) }, false); } } ---- というコードで、イベントを追加したのですが hoge0をクリック -> check(3)を呼び出し hoge1をクリック -> check(3)を呼び出し hoge2をクリック -> check(3)を呼び出し となってしまいます。つまり、引数にループの最後の数字+1が渡されてしまいます。 どうしたらよいのでしょうか？
- ベストアンサー
- JavaScript
- onClickへの代入について
以前onClicｋへの代入方法についてお聞きしましたが、 また壁にぶつかっておりますので教えてください。 バナーのクリック数をカウントするために、GoogleAnalyticsの以下の関数をaタグのonClickに追加して利用しています。 <a href="xxx.html" onClick="javascript:urchinTracker(\'/test/test\');"><img src="xxx.gif"></a> これは問題ないのですが、 Javascriptで画像を切り替えるため以下のような構成でテストしたところ、 src、href、targetは正常に代入されるのですが、 onClickのみjavascript:urchinTracker(\'/test/test\');のままで、/test/aaaが代入されません。 また、元のHTMLソースからonClickタグ自体を削除すると、onClickタグそのものが代入されません。※Firebugで確認しています。 Javascritpt（sample_chg.js）部分 myImage = new Array(4); myImageName = 0; myImageLink = 1; myImageTarget = 2; myImageOnclick = 3; myImage[myImageName] = "dummy01.gif"; myImage[myImageLink] = "http://ｘｘｘｘｘ.com/"; myImage[myImageTarget] = "_blank"; myImage[myImageOnclick] = "javascript:urchinTracker(\"/test/aaa\");"; function myChange(){ document.getElementById("myFormImg").src = myImage[myImageName]; document.getElementById("myLink").href =myImage[myImageLink]; document.getElementById("myLink").target =myImage[myImageTarget]; document.getElementById("myLink").onClick =myImage[myImageOnclick]; } HTML部分 <a id="myLink"onClick="javascript:urchinTracker(\'/test/test\');"><img id="myFormImg"></a> <script language="javascript" type="text/javascript" src="/js/sample_chg.js"></script> <script language="javascript" type="text/javascript"> myChange(); </script> 以前文字列については関数にして代入せよと教えていただいたのですが、 このような場合はどうすればよいのでしょうか。 どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- onclickは良くないのですか
以前、こちらで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を指定するのでしょうか？ コードを変えてもいいのかすら検討ができていません。 ご教授のほどをお願いします。
- ベストアンサー
- JavaScript
- <form>タグ内の再読み込みに関して
以下のようなhtmlファイルがあったとします。 ※<body>タグ内以外は省略 ------------------------------------------------- <body onload="bodyload()"> <form> <input id="id_button1" type="image" value="button" name="n_button1" onclick="click();"> </form> </body> ------------------------------------------------- 呼び出されるjavascriptを以下の通りとします ------------------------------------------------- function bodyload() { document.getElementById('id_button1').src = '/images/base.png' } function click() { document.getElementById('id_button1').src = '/images/1.png' } ------------------------------------------------- id_button1のクリックによって、click()が動作し画像が「/images/1.png」に変更されるのですが、 一瞬で「/images/base.png」に戻ってしまいます。色々試したところhtmlファイルの<form>タグを 消してやれば「/images/base.png」に戻ることなく画像を変更することが可能であることに気づき ました。 どうやらformタグがあると再読み込みが行われているようです。 formタグがあると何故このような動きをするのでしょうか？ formタグ内でも再読み込みの有無を 制御することはできないのでしょうか？お分かりになる方がいらっしゃればご教授いただければ と思います。 javascriptというよりhtmlの内容かもしれませんがよろしくお願いいたします。 なお、実行環境はWindows8Pro、VisualStudio2012、Windowsストアアプリ開発プロジェクト内のデバッグです。
- ベストアンサー
- JavaScript
- getElementByIdでonClick内を書き換える方法
お尋ねします。 適当なIDを振ったaタグ内の各プロパティを画像の切り替えに応じて 書き換えるスクリプトを試しています。 srcや画像の切り替えなどはうまくいくのですが、 onclicｋ内だけうまく書き換えができません。 onclickはイベントハンドラだから無理という気がするのですが、 なにか方法はないでしょうか。 以下のようなスクリプトを書いています。 myImageName = 0; myImageLink = 1; myImageTarget = 2; myclick = 3; myImage = new Array(); myImage[0]= new Array("01.jpg","ttp://aa.com/","_top","alert('HELLO')"); myImage[1]= new Array("02.gif","ttp://bb.com/","_blank","alert('HI')"); i = 0; function aaa(){ document.getElementById("banner").src = myImage[i][myImageName]; document.getElementById("banner").href =myImage[i][myImageLink]; document.getElementById("banner").target =myImage[i][myImageTarget]; document.getElementById("banner").onclick =myImage[i][myclick]; } ※あとはタイマー用のスクリプトが続きます。 記述が間違っている気はするのですが、 解決策がわかりません。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 【JavaScript】toggleの使い方
id="color"を付けた<p>タグで以下のような記述をしてみました。 マウスオーバーをすれば、上記の<p>タグの色は赤に変わり、マウスをはずすと 色が元の色（black）に戻ります。 うまくはいきましたが冗長に感じます。 classListを使ってtoggleをつけた練習をしたことはあります。 このようなケースで"toggle"を使ってマウスオーバーをした時にはテキストは赤色、はずすと元の色(black)になるように簡潔に記述する方法はあります？ 超初心者です。簡潔に記述する方法があれば教えて下さい。宜しくお願いします。 (HTML) <p>こんにちは。こんにちは。こんにちは。</p> <p id="color">こんにちは。こんにちは。こんにちは。</p> <p>こんにちは。こんにちは。こんにちは。</p> ---------------------------------------------------- (JavaScript) document.getElementById("color").addEventListener("mouseover", () => { document.getElementById("color").style.color = "red"; }); document.getElementById("color").addEventListener("mouseout", () => { document.getElementById("color").style.color = "black"; });
- ベストアンサー
- JavaScript
- addEventListenerの使い方について
イベントリスナでスクロール時にアラートを表示したいのですが、 以下のソースでは動作しませんでした。 どこかに簡単なイベントに対するアクションを記載したサンプルコードはありますでしょうか？ <script type="text/javascript"> document.addEventListener("scroll", alview, false); funciton alview(a){ alert(1); } </script> <body>
- ベストアンサー
- JavaScript
- javascript return について
javascript return の使い方について こんにちは。 javascriptでhtmlとjavascriptを分けて書く方法を勉強中です。 ○html文 <a href="" name ="linkMaxcd" id ="linkMaxcd">最大値</a> ○javascript文 １）document.getElementById("linkMaxcd").onclick=function(){return maxcd();} ２）function maxcd(){ 省略 return false; } この構文の流れは、 (1)htmlの最大値というテキストリンクをクリックする (2)javascript １）のonclickしたら、maxcdのfunctionを実行する (3)javascript ２）の省略を行い、return false；でfalseを返す ということだと思います。 javascript ２）のreturn false; のfalseは、何処に戻るのですか？ ○javascript参考 １'）document.getElementById("linkMaxcd").onclick=function(){maxcd();} ２'）function maxcd(){ 省略 } もともと上記のjavascript参考にreturnを付け加えたところで、理解できなくなりました。 returnの付け方は、javascript参考サイトの手順に書いてありました。 よろしくお願いします。 以上
- ベストアンサー
- JavaScript
- javascriptで困っています
スマホでタッチした場所の座標を取得しようとしているのですが、いろいろ調べて以下のように作ってみましたが、座標が取得できません。どこを直せばいいのか、教えていただきたく投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <script type="text/javascript" charset="utf-8"> var touch_box = document.getElementById("box"); touch_box.addEventListener("touchstart", function(e){ document.getElementById("txt0").innerHTML = "スタート"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchmove", function(e){ document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchend", function(e){ document.getElementById("txt0").innerHTML = "エンド"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); </script> </head> <body> <div id="box"> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </div> </body> </html>
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に10pxずつ移動させたいのですが、どのようにしていいのかよく分かりません。 document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; の部分に無理があるのでしょうか？ 教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = document.getElementById("kt").style.top+10; } </script> </body> </html>
- ベストアンサー
- JavaScript
