2451


要素に紐付くイベントハンドラを全て取得する方法はあるでしょうか。  
たとえば、

[code]

    <body>
      <button id="button1" onclick="alert('test1');">test</button>
      <script>
        $("#button1").click(function () {
          alert("test2");
        });
        $("#button1").click(function () {
          alert("test3");
        });
        $(document).on("click", "#button1", function () {
          alert("test4");
        });
      </script>
    </body>
    
[/code]

のようなページの場合、#button1のボタンをクリックすると

> test1  
>  test2  
>  test3  
>  test4

の４つのalertが表示されますが、この４つの関数を全て取得したいです。  
ちなみに、

[code]

    var onclick = $("#button1").get(0).onclick;
    
[/code]

という方法では、最初の `test1` に相当する関数しか取得できませんでした。


CC BY-SA 3.0
2014-12-23T23:09:30.540
2443
2014-12-25T03:06:59.080
3925
question
javascript jquery
設定されているイベントハンドラを取得する方法


タグ属性の`onclick`と、`$("#button1").click()`と、`$(document).on("click", "#button1",
...)`では、イベントとしては別物になります。

`onclick`を得るには、試された方法で取得できます。これはネイティブ(？)が発火しています。

対して、`$("#button1").click()`と`$(document).on("click", "#button1",
...)`は、jQueryが発火しています。
違いは、前者がボタンそのものに対するイベントで、後者はdocumentへのイベントをselecter("#button1")で絞り込んで発火しています。

なので、それぞれ。。

[code]

    var onclick = $("#button1").get(0).onclick;
    console.log(onclick);
    
[/code]

とか、

[code]

    var events = $._data($("#button1").get(0)).events
    $.each(events.click,function(){
      console.log(this.handler);
    });
    
[/code]

とか、

[code]

    var events2 = $._data($(document).get(0)).events
    $.each(events2.click,function(){
      if(this.selector === '#button1')
        console.log(this.handler);
    });
    
[/code]

とかで、取得できます。


CC BY-SA 3.0
2014-12-24T01:26:48.207
2451
2014-12-24T01:52:13.253
2014-12-24T01:52:13.253
2992
2992
2443
answer


[デベロッパーツールでの確認方法](http://qiita.com/zaru/items/b7732ebad9b732518359)が記載されたページが有りましたので、参考までに。

以下、簡単に操作方法を記載します。

`$("#button").click()`で登録されているイベントは、コンソールから、

[code]

    $._data($("#button1").get(0), "events");
    
[/code]

と入力することで確認することができます。

同様に、`$(document).on()`で登録されているイベントは、コンソールから、

[code]

    $._data($(document).get(0), "events");
    
[/code]

と入力することで確認できます。

inputタグの属性として設定されているclickイベントは、Elementsタブから調べたい要素（今回の場合は `<button id="button1"
onclick="alert('test1');">test</button>`）を選択して、EventListenersタブで確認できます。

複数イベントが表示されますが、タグの属性としてイベントを定義しているので参照先がHTMLのものが該当のものになります。

また、ElementsタブからでもjQueryのclickやonで登録されたイベントがあることは確認できますが、実際の関数の定義とは結びついていないので、実際にどのような関数が呼び出されるかを確認するためには、前述の方法でおこなうといいと思います。


CC BY-SA 3.0
2014-12-24T03:03:10.167
2465
2014-12-25T03:06:59.080
2014-12-25T03:06:59.080
2214
2214
2443
answer


参考までに、Virtual Eventというブックマークレットを使うと各要素のイベントが見られるので便利です。

  * <http://www.sprymedia.co.uk/article/Visual+Event+2>

ソースを読むといろいろな環境上でのイベント取得の参考にもなります。


CC BY-SA 3.0
2014-12-24T11:49:58.670
2495
2014-12-24T11:49:58.670
2244
2443
answer