chromeDevツールの「event listeners」にて要素のイベントを調べたい

Question

前提・実現したいこと

chrome Devツールの「event listeners」にて要素のイベントを調べたいです

発生している問題

<div id="hoge">
<button>hoge</button>
</div>

$('#hoge').on('click','button',()=>{
  console.log(99)
})

この場合、<div id="hoge">要素にはclickイベントが表示されますが、肝心の<button>には何も表示されません。
特に$(document).on('click','要素',()=>{のようにdocumentを多用している場合など、どのようにイベントリスナーを調べることができますか？

Answer 1

$('#hoge').on('click','button',()=>{

console.log(99)
})

は、あくまでも#hogeに設定したeventListenerで、その中のbuttonが反応しているだけです
だからこそ動的にあとからbuttonを追加しても反応するわけです。

どうしても拾いたいなら、こうしてください
（動的に追加したbuttonには反応しませんが）

$('#hoge button').on('click',()=>{
  console.log(99)
})

Comments

[real3]

元の状態でツールで調べる方法はないということでしょうか？

[yambejp]

いや、開発ツール上からEventListenersをみれば
buttonを選択した時点でdiv#hogeのclickイベントが拾えますよね？