5

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

<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>

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

test1
test2
test3
test4

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

var onclick = $("#button1").get(0).onclick;

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

3 件の回答 3

7

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

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

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

なので、それぞれ。。

var onclick = $("#button1").get(0).onclick;
console.log(onclick);

とか、

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

とか、

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

とかで、取得できます。

2

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

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

2

デベロッパーツールでの確認方法が記載されたページが有りましたので、参考までに。

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

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

$._data($("#button1").get(0), "events");

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

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

$._data($(document).get(0), "events");

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

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

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

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

3
  • 本当に他の回答と内容が同じであれば、そちらにコメントした方が分かりやすいです (ただしその前にQ&Aの投稿を通じて信用度を50まで上げる必要があります)。デベロッパーツールでの確認方法はまだ回答がないので、要点を記載しておくと回答としてより役に立つ内容になると思います。(回答はあとから編集できます)
    – ento
    Commented 2014年12月24日 12:44
  • 1
    ご指摘ありがとうございます。内容を編集してみました。
    – webarata3
    Commented 2014年12月25日 3:07
  • 編集ありがとうございます!
    – ento
    Commented 2014年12月25日 3:13

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。