javascript について


例えばあるリンクがあります。
ここにはjavascriptで何かが書いてあります。

このリンクをクリックすると
ある事が起こるのですが、
そのクリックした瞬間に何という関数が呼び出されているのかを
知ることができるようでしたら教えて下さい。
例えばアラートで「hoge()」と表示されるとか...

よろしくお願いします。

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2011/05/29 09:57:51
  • 終了:2011/06/05 10:00:04

回答(2件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922011/05/29 20:08:24

ポイント60pt

DOM 0 events、jQueryなどの可視化ならこういうのがあります。

http://phpspot.org/blog/archives/2011/04/javascriptvisua.html


addEventListenerなどDOM Level 2,3で仕掛けられたイベントを観測するにはアドオンしかないと思います。

Firebug拡張のEventBugでエレメントのイベントを参照することができます。

jQueryのイベントはFireQueryを使うとより見やすくなります。



function hoge(){ alert(1) }
document.body.addEventListener('click', hoge, false);
document.body.addEventListener('click', function(){ alert(2) }, false);

をコンソールで実行してからEventBugによって追加されたEventsタブをみると

20110529200404

こうなります。


Firefox 4.0.1

Firebug 1.7.1

EventBug 0.1b8

で動作確認。

id:worldtravel

ありがとうございます。

これも入れてあるのですが、もともと書かれているコードならこれで見えますが、

javascriptによって追記されたコードは見えませんよね。


最初から

<div id="hoge" onclick="alert('foo')">クリック</div>

と書かれていればこれで見るとわかりますが、

<div id="hoge">クリック</div>

と書かれている部分を、javascriptによって

<div id="hoge" onclick="alert('foo')">クリック</div>

とされた場合は、

<div id="hoge">クリック</div>

としか見えませんよね。

他にないでしょうか....

2011/05/29 20:21:00

質問者が未読の回答一覧

 回答者回答受取ベストアンサー回答時間
1 TransFreeBSD 661 319 264 2011-05-30 09:38:14
  • id:Cherenkov
    それは自分が開発者で自由なコードを書ける場合?
    それとも他人のホームページを加工したい場合ですか?
  • id:Cherenkov
    具体的に何をしたいのかサンプルコードを書いてください。
  • id:worldtravel
    ありがとうございます。

    例えば...は、回答の通りなのですが、

    htmlファイルで「クリック」と書かれたところをクリックすると
    「foo」というアラートが表示されます。
    しかし、htmllファイルを見ると
    <div id="hoge">クリック</div>
    としか書かれていません。

    それはjavascriptにより、
    htmlを表示した後にこのように追記されているからです。
    <div id="hoge" onclick="hoge()">クリック</div>

    javascriptには下記のように書かれているところがあるはずなのですが
    自分の技術力ではどの関数が呼ばれてアラートが表示しているのかがかわかりません。
    function hoge(){
    alert('foo');
    }

    例としてアラートと書いていますが
    実際はクリックによってある処理が行われます。

    javascriptのファイルには膨大な関数が書かれていますが
    どこが呼び出されているのかが知りたいのです。

    配布されているjavascriptのファイルですが、
    これにあることを追加したいのです。
  • id:Cherenkov
    ><div id="hoge">クリック</div>としか見えませんよね。
    onclickであれば見えますけどね。
    http://jsfiddle.net/vEgjC/

    addEventListenerを見るには回答1の方法になります。


    単純にコードを解析する目的で関数名を知りたいのですか?
    エレメントのid名などで検索して読み解いたらいいのではないでしょうか。
    またそのコードは非公開なのですか?
  • id:Lhankor_Mhy
    >それはjavascriptにより、
    >htmlを表示した後にこのように追記されているからです。
    ><div id="hoge" onclick="hoge()">クリック</div>
     
     ちなみに、なぜ「そのような動作をしている」と分かったのでしょう?
     そのスクリプトの動作が分からず、またfirebugでonclickを確認することができない状態なのですよね?
     なのにどうして、「onclickに追記している」と分かったのですか?
  • id:worldtravel
    すみません。
    onclickではないかもしれません。

    実はこちらの質問と同じなんです。
    http://q.hatena.ne.jp/1306245666

    こやって書いた方がわかりやすいのかなと思い
    質問の仕方を変えてみました。
    返ってわかりにくくなってしまった気がしますが...

    googlemaps apiに、pdmarker.jsを使ってマーカーを表示すると、
    マーカーをクリックした時に小さなウィンドウが表示されます。

    この時、何という関数が実行されて
    この小さなウィンドウが表示されているか知りたいのです。

    マーカーをクリックした際に別の動作も付け加えたいからです。

    また、各マーカーにはIDが付いているのですが、
    どのマーカーをクリックした時も処理は同じなのですが、
    同じ「クリックkされました」と言うような処理ではなく
    「ID「***」がクリックされました」という処理にしたいのです。

    と、考えており、質問しました。
  • id:Lhankor_Mhy
    質問の答えではないのでコメント欄に書きます。
     
    >googlemaps apiに、pdmarker.jsを使ってマーカーを表示すると、
    >マーカーをクリックした時に小さなウィンドウが表示されます。
    >この時、何という関数が実行されて
    >この小さなウィンドウが表示されているか知りたいのです。
     
    そのページのドキュメント?的な「Interface」の「Behaviour」に書いてありますね。
    >marker.setDetailWinHTML(html); // display this html when marker is clicked
     
    仕組み的にはGEvent.addListenerでイベントをアタッチしてますので、簡単に調べる方法はないのではないかなあ?

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません