• ベストアンサー

addEventListenerの使い方について

イベントリスナでスクロール時にアラートを表示したいのですが、 以下のソースでは動作しませんでした。 どこかに簡単なイベントに対するアクションを記載したサンプルコードはありますでしょうか？ <script type="text/javascript"> document.addEventListener("scroll", alview, false); funciton alview(a){ alert(1); } </script> <body>

  • php4
  • お礼率42% (373/888)

質問者が選んだベストアンサー

  • ベストアンサー
  • yamada_g
  • ベストアンサー率68% (258/374)
回答No.2

質問時のコピーミスなのかもしれませんが、 >funciton alview(a){ function alview(a){ です。function のスペルが違います。 それだけ直したらとりえあえずChromeでは動きましたよ。 IEではaddEventListener()がサポートされていないので どちらにしてもダメですが。

その他の回答 (2)

  • yamada_g
  • ベストアンサー率68% (258/374)
回答No.3

#2です。 さきほど >IEではaddEventListener()がサポートされていないので と書きましたが、IE9では実装されているみたいですね。

  • edomin7777
  • ベストアンサー率40% (711/1750)
回答No.1

<script type="text/javascript"> funciton alview(a){ alert(1); } function load() { document.addEventListener("scroll", alview, false); } </script> <body onload="load();"> とかにしたら、どうなる？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • formのsubmitイベントの発生についての質問です。

    formのsubmitイベントの発生についての質問です。 あるところで、「form.submit() は submit イベントを発火しない」 とあったので、 ↓のscriptで、formのsubmitイベントを調べていました。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>SessionTestNext</title> <style type="text/css"></style> <script type="text/javascript"> function send1(elm){ 　elm.form.submit(); } function send2(){ 　document.getElementById("form1").submit(); } if('undefined' !== typeof document.addEventListener){ 　document.addEventListener('submit', function(event){ 　 var target = event.target; 　 alert(target.id); 　}, false); } else if ('undefined' !== typeof document.attachEvent){ 　document.attachEvent('onSubmit', function(event){ 　var target = event.srcElement; 　alert(target.id); 　}); } </script> </head> <body> <p>SessionTestNext 1 </p> <form id="form1" action="/php/session2.php" method="post" onsubmit="alert('Submited!');return false;"> <input type="text" name="parm2" value="fugafuga"> <input type="submit" value="サブミット"> <button onclick="send1(this)">Javascriptサブミット(1)</button> </form> <button onclick="send2()">Javascriptサブミット(2)</button> </body> </html> だのに、 send1()を実行した時は、イベントが検知され'Submited!'がアラートします。 ただし、onsubmitのハンドラーでfalseを返してるので、サブミットしません。 send2()を実行した時は確かに、submitイベントは発生せず、'Submited!'の アラート無しで、実際サブミットされます。 documentにaddEventListenerで追加したハンドラーの方でも、send1()の 時だけ検知され'form1'がアラートします。 　send1()で検知されるのは何故でしょう？ また、IEでも同様の動作なんですが、何故か　document.attachEvent('onsubmit', の方が、まったく動きません。（タイポかも）

  • JavaScriptの論理演算子について

    JavaScriptの論理演算子について質問です。 「alert(e.target||e.srcElement);」の結果がtrue かfalseではなくて「object HTMLHtmlElement」となるのは何故なのでしょうか？ JavaScriptでは"||"は論理演算子ではないのでしょうか？ ----------------------------------------------------------------------- <body> <a id="id1">Textarea</a> <script> (function () { 　 var i = document.getElementById ("id1"); 　 document.addEventListener("dblclick", addEL, false); 　 function addEL (e) { alert(e.target||e.srcElement); 　 } }) (); </script> </body>

  • 【javascript　文法】値渡し？参照渡し？

    以下実行すると、AAAをクリックしてもBBBをクリックしても「BBB」とアラートされます。 <html> <head> <script type="text/javascript" src="prototype.js"></script> </head> <body> <script type="text/javascript"><!-- var gDown= false; var div = document.createElement('div'); div.id = 'AAA'; div.innerHTML = 'AAA'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); var div = document.createElement('div'); div.id = 'BBB'; div.innerHTML = 'BBB'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); Event.observe(document, 'mouseup',function(){ alert(gDown.id); gDown=false; }); //--></script> </body> </html> javascriptって値渡しだと思っていたので、期待した動作と異なります。参照渡しだと考えると納得できるのですが、javascriptって 参照渡し？それとも値渡し？　と混乱しています。 この辺のところを、教えてください。お願いいたします。

  • 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が渡されてしまいます。 どうしたらよいのでしょうか？

  • イベントハンドラに処理を追加するには？

    例えばbodyタグのonloadイベントハンドラに JavaScriptを使って処理を追加するにはどうすればよいのでしょうか？ 例） ・rei.htm <html> 　<script language="JavaScript" type="text/javascript"> 　function hoge(){ 　　alert("hogeです"); 　} 　function foo(){ 　　alert("fooです"); 　} 　</script> 　<body onload="hoge();"> 　</body> 　<script language="JavaScript" type="text/javascript"> 　document.body.onload += foo(); 　</script> <html> ※前提条件として、変更可能な箇所はscriptタグ内のみとなります。 「こんなんでいけないかな？」と思って上記のようにやってみたのですがうまくいきませんでした。 （結果はfoo()のみ実行され、hoge()は実行されませんでした。 alertでbody.onloadの中身を確認すると『function anonymous{hoge();}undefined』と表示されるので、なぜfoo()が実行されてhoge()が実行されないのかよくわかりませんが‥） また試しに document.body.onload += foo(); これを以下のように変更してみました。 document.body.onload = foo(); この時は、 ・foo()の実行 　↓ ・javascriptエラー 　↓ ・hoge()の実行 となりました。（これもなぜこうなるのかよくわかりせん） 以上、イベントハンドラに最初から任意に入れられている処理を残しつつ、 さらに処理を加えるにはどうすればよいのかご教示お願いします。

  • 外部ファイルの記述の問題なのかエラーが出ます

    IE6を使っています。 次のように[a.js]を呼び出したのですが、 オブジェクトがありませんとエラーが出ます。 そのエラーの次に[test.html]にあるalertの内容は表示されます。 どこが間違っているのでしょうか？ [a.js] var a = document.body.clientWidth; [test.html] <html> <head> <title>test</title> <script type="text/javascript" src="a.js"></script> </head> <body> <script type="text/javascript"><!-- alert(document.body.clientWidth); --></script> </body> </html>

  • タグを書き込む

    <body> ・ ・ ・ <script type="text/JavaScript"> <!-- function sample(){ document.write("あいうえお<br />") } // --> </script> ・ ・ ・ </body> とするとほかのタグが消えてしまうのですが、ほかのタグを消さずに書き足すことはできないんですか？

  • マウスでページを横スクロールさせる方法

    縦方向にスクロールさせることはできましたが横スクロールの方法がどうしてもわかりません。 縦スクロールのやり方も下のスクリプトより簡素化できますでしょうか？ <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function mScroll(){ scrollTo (0,(document.body.scrollHeight-document.body.clientHeight)*event.y/document.body.clientHeight); } </SCRIPT> </HEAD> <BODY onmousemove="mScroll()"> </BODY> </HTML>

  • HTMLソースをコピーするブックマークレット

    よろしくお願いします。 タイトルのとおり、HTMLソースをコピーするブックマークレットを作りたいのですが、 IEからメモ帳でソースを開いた時と全く同じ内容をクリップボードにコピーしたいのですが、 以下のスクリプトではそのように動作しませんで、困っています。 javascript:alert(document.parentWindow.clipboardData.setData("text", document.body.innerHTML)?'コピー完了':'false'); 上記ので駄目だったので、以下のスクリプトも試しましたが、駄目でした。 javascript:alert(document.parentWindow.clipboardData.setData("text", document.getElementsByTagName('html')[0].innerHTML)?'コピー完了':'false'); 上記スクリプトでは<HEAD>～</BODY>までの間しかコピーされず(その前後の<script >関連などがコピーされません)、また、改行やインデントなども消去されてしまっています。 コピーしたデータをPHPのプログラムでデータとして処理しているため、IEのソースを表示でメモ帳で開いたデータと全く同じ様式にしてコピーしたいのですが…。 詳しい方がおられましたら、どうかよろしくお願い致します。

  • 【javascript】prototypeを使って宣言したfunctionでthis.の値が取れない

    以下HTMLは開いた時に'aaa'がアラートされるつもりで作りました。 ※行頭は全角スペースです。 <html> <head> <script type="text/javascript"><!-- function hoge(){ 　this.val ='aaa'; }; hoge.prototype.func = function(){ 　alert(this.val); }; h = new hoge(); if(window.addEventListener){ 　window.addEventListener('load', h.func, false); }else{ 　window.attachEvent('onload', h.func); } //--></script> </head> <body> </body> </html> 結果は、undifindがアラートされました。 alert(this.val);　を　alert(h.val); とベタに記述すれば回避できますが、ちょっと違和感を感じます。 このような場合、どのような記述がベターなのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する