kaibukuroのブログ

HTML/CSS/JavaScript/PHPなどのアウトプット

【JavaScript】ブラウザで要素に設定されたイベントを調べる方法

ブラウザで、要素に設定されたイベントを調べる方法を備忘録として書いておきます。

Chrome例】

①developerツールにて、タグを選択する。
②Event Listenersタブをクリック。
③clickイベントがあればclickなどと表示されており、▼を押してさらに下を見ると、
この場合だとbuttonタグに対して、青い文字のファイルから関数などが設定されているようなので、
青い文字のリンクをクリックすると、その記述のソースへ飛べます。
※補足として、左下の{}をクリックすると、フォーマットされるので、圧縮されている場合などに有用です。

f:id:kaibukuro:20200726173204p:plain
                  
f:id:kaibukuro:20200726173911p:plain


Firefox例】

①developerツールにて、タグの右端にあるグレー背景の「ev」(あるいはMacだと?「event」を選択する。
②clickなどのイベント名をクリックすると、その場で小さいウィンドウでソースが表示されます。

見るだけならシンプルでわかりやすいですね。
あと日本語なのでわかりやすいですね。

f:id:kaibukuro:20200726174448p:plain



画像に使用したソース:
Element: click イベント - Web API | MDN