- 締切済み
イベントリスナを調べる方法についての質問です。
イベントリスナを調べる方法についての質問です。 現在twitterのページで使われているJavaScriptの挙動を分析しているのですが、コード量が非常に多く苦労しています。 ある要素にどのようなイベントリスナが追加されたか、または追加されているかということを調べるいい方法はないでしょうか？ addEventListenerで関数を登録した場合、element.onclickにセットされた関数を取得するというような方法が使えないので困っています。 bookmarkletやユーザースクリプト、アドオンなど何でもいいので、要素に追加されているイベントリスナを直接調べたり、あるいはイベントリスナが追加される瞬間を検出できるようないい方法があれば教えてください。 （解析はFirefox上で行っていますが、他のブラウザを使う方法でも構いません） 宜しくお願いします。
- 665
- お礼率0% (0/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- think49
- ベストアンサー率59% (285/482)
関連するQ&A
- 問題はbind の付いたリスナーを削除できないこと
リンク先で下記のように書かれていますが、どういう意味でしょうか？ ＞問題は、bind の付いたリスナーを削除できないということ ・「bind の付いたリスナーを削除」しないと何がマズいのでしょうか？ ・thisの挙動が変わったままになるから？ ・thisの挙動が変わるというのは、Somethingの中だけの話ではないのでしょうか？ ・この場合のリスナーは？ addEventListener('click', this.onclick2を指すのでしょうか？ ＞リスナーを後で削除できるように、そのリスナーへの参照を残しておく必要があります ・「リスナーへの参照を残しておく」って、具体的にどういうことなのでしょうか？ https://developer.mozilla.org/ja/docs/Web/API/EventTarget.addEventListener
- ベストアンサー
- JavaScript
- イベントリスナの削除
あるオブジェクトとそれ以外のいくつかのオブジェクトを含むドキュメントがあります。 そのドキュメント全体のうち、例えば、すべてのa要素に対して、clickイベントを追加したとします。 また、そのドキュメントのうち「あるオブジェクト」だけを非同期通信によって差し替えます。 この時、差し替えられる前の「あるオブジェクト」に登録されたイベントが残ったまま、新しいオブジェクトに差し替えられてしまいます。 これを何度も繰り返していくことで、UAは悲鳴を上げているようなのです。（具体的には、ページ内リンクを辛そうにしています） 解消するには、『「あるオブジェクト」だけを非同期通信によって差し替え』る直前に、「あるオブジェクト」に登録されたイベントをすべて破棄すればいいと思うのです。 ですが、登録されたイベントの一部は引数を与える必要があったため、 Obj.addEventListener(eType, (function(arg) { return function(event) { //こう書くと、argにaが、eventにイベントオブジェクトが渡される } })(a), false); このような記述をしており、関数名がありません。 そこで、あるオブジェクトに対して、登録されたイベントをすべて破棄する、良い方法があればご教授頂きたく、質問させていただきます。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- JSのイベントターゲット が難しい
JSのイベントターゲット (EventTarget)が難しくてよくわからないのですが初心者にもわかるように解説していただけるとありがたいです。 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget イベントターゲット(EventTarget)は、DOMイベントを受け取り、それらへのリスナーを持つことが出来るオブジェクトによって実装されるDOMインターフェースです。 Elementと、 documentと、 windowは、ほとんどの共通イベントターゲットですが、 例えば、XMLHttpRequest、AudioNode、AudioContextなど、 他のオブジェクトもエベントターゲットになることが可能です。 多くのイベントターゲット(Element、document、windowを含む)は、 onXXXプロパティと属性を介して、 イベントハンドラの設定もサポートします。 メソッド .addEventListener() 要素にイベントハンドラを登録します。 .dispatchEvent() DOM内のノードのイベントを実行します。 .removeEventListener() EventTarget.addEventListenerを使用して登録されたイベントリスナーを削除します。 イベントを発動させる要素につけるイベントファンクションのようなものなのでしょうか？
- ベストアンサー
- JavaScript
- JavaScriptのイベントハンドラ設定の方法
要素（aタグなど）にイベントハンドラを設定する場合、 直接onclick等を書かずにaddEventListenerで追加するのが良いと聞きました。 しかしIEでは使えず、attachEventで設定する必要があります。 htmlとJavaScriptを分離するという意味では理解できるのですが、 http://java-script.seesaa.net/category/2504769-1.html の用に document.getElementById("hoge").onclick = function("hogehoge"); とする方が楽なんじゃないでしょうか？ IEでもFirefoxでも動くので、addEventListenerの用にブラウザ毎に書く必要もありません。 前者を使うメリットは何なのでしょうか？
- 締切済み
- JavaScript
- イベントリスナーの部分を関数にしたい
イベントリスナーの部分で、「load」以外に「change」も必要になったので関数にしたいのですが、 引数の関数の指定方法がわかりません。 どうすればいいのでしょうか。よろしくお願いします。 【イベントリスナーを関数にする前】 function hoge(){ this.view = function(){ var _this = this; window.addEventListener( 'load',function(){ _this.foo()}, false ); } this.foo =function(){ var txt = document.createTextNode( this.moji ); document.body.appendChild( txt ); } } var a =new hoge(); a.moji="テスト"; a.view(); 【やってみたこと】 function hoge(){ this.view = function(){ var _this = this; var func = function(){ _this.foo()}; this.addListener( 'window', 'load', func ); } this.addListener = function(elem,type,func){ elem.addEventListener( type,func, false ); } this.foo =function(){ var txt = document.createTextNode( this.moji ); document.body.appendChild( txt ); } } var a =new hoge(); a.moji="テスト"; a.view();
- ベストアンサー
- JavaScript
- イベントリスナーがうまくいかない
delBtnがない場合にイベントリスナーを読み込むとエラーが出てその後の処理が行われないため 下記のようにあった場合のみ予約するようにしたところ今度はクリックしても実行されない問題が起きました。 読み込み時は、エラーにならないようにし、かつボタンを押したときに要素を削除するようにするにはどうしたらよいでしょうか？ var Result = document.getElementsByClassName('Result')[0].innerHTML = '<span class="u-mr-1rem">あああああ</span><input id="DelBtn" type="button" value="削除">; var Result = document.createElement('p'); BtnWrap.appendChild(Result); Result.classList.add('Result u-mtb-1rem'); var delBtn = document.getElementById('DelBtn'); if(delBtn !== null) { delBtn.addEventListener('click', function() { document.getElementsByClassName('Result')[0].remove(); }); }
- 締切済み
- JavaScript
- HTMLに書き込むことなく、イベントを制御する方法
よく、HTMLに <img src="yyy.gif" onMouseover="this.src='xxx.gif'"> というふうにイベントハンドラを設定するのを見かけますが、 <script>タグ内で document.onclick = 関数名; となっているのもあります。 後者の方が、スマートのような気がするのですが、その書き方とか、仕様をしっかり理解できてないようなので質問します おそらく、これに限らず基礎的なことだと思います １、 document.onclick = の後に指定できるのは、関数名の他に何があってどう書くのか？ ２、 document.onclick = funcEx(); としないで document.onclick = funcEx; とするのはなぜか？ 引数は設定できないのか？ ３、 <script>内から、指定した要素のイベントを制御する方法がほかにあれば 教えてください 以上、どれかひとつでも、複数でもいいので、回答もらえるとありがたいです
- ベストアンサー
- JavaScript
- イベントリスナに登録される function(e){} の "e" はeventオブジェクト？
私はイベントリスナ登録時の匿名関数に渡す引数eの意味が今まで理解できていませんでした。 最近、下記コードを実行することで、 <script type='text/javascript'> window.addEventListener ('click', function(e){ console.info(e); // 引数をコンソール表示 (要Firebug) for (p in e){ console.info(p + ' = ' + e[p]); // プロパティを列挙 } }, false); </script> 「eventオブジェクトを渡しているらしい」と朧気ながら理解できました。 ただ、疑問点も残ります。 私の理解では、匿名関数は (function(str){ alert(str); })('Hello'); のように明示的に引数を渡さなければ、引き渡された値は undefined となるはずでした。 変数eの値はどこから出現したのでしょうか？ そもそも、変数eはeventオブジェクトなのでしょうか？
- ベストアンサー
- JavaScript
- イベントevt?evt.target:event.srcElement;の意味合い
以下の理解で合っているのでしょうか？ よくイベントの取得で エレメント.onclick = function(evt){ var e = evt?evt.target:event.srcElement; } でeにイベントオブジェクトの発生元要素をセットしているのを見かけますが、 これは、ブラウザーの違いの吸収なのでしょうか？ firefoxでは、イベントハンドラー関数にイベントオブジェクトが渡されるので、渡されたイベントオブジェクトよりevt.targetで発生元要素をセットし、一方IEでは、eventという名前のオブジェクトが存在している（？）ので、イベントハンドラー関数にイベントオブジェクトが渡されず、event.srcElementで発生元要素をセットする。 ※Opera、Safariは何でも良い IEの場合、後から、イベントが追加されたらeventオブジェクトはどうなるのでしょうか？ある要素の一つのイベントタイプには一つのイベントハンドラーしか定義できないのでしょうか？
- 締切済み
- JavaScript
- 複数インスタンスに共通するイベント処理の方法
こんにちは。 ActionScript3.0でサイト制作を行なっています。 マウスイベントのイベントリスナーを複数のボタンに登録する際に、 ループ処理によって登録できないか考えました。 例えば、 menu.buttonHome.addEventListener(MouseEvent.MOUSE_OVER, homeOver); menu.buttonAbout.addEventListener(MouseEvent.MOUSE_OVER, AboutOver); 上記は違うインスタンスにマウスオーバーのイベントを登録しておりますが、 記述にある「Home」「About」以外は全て共通の書式ですので、この部分だけ文字列を置き換えて処理できないでしょうか？ 例えば、配列に「Home」「About」「Contact」のような文字列を格納し、上記イベントリスナーの指定の文字列だけを置き換えるという方法です。 また、上記のような文字列の置き換え以外にイベント処理の記述を簡略化する方法がありましたら是非ご教授ください。 宜しくお願いいたします。
- ベストアンサー
- Flash
