LoginSignup
1
2

More than 5 years have passed since last update.

ChromeでHTML ElementのイベントがどのjavascriptにbindされてListen状態になっているか見る

Last updated at Posted at 2016-04-16

ちゃんと見れるの知らなかったのでメモしておきます。

他人のページなのでちょっとアレですが、こちらのサイトで見てみました。
http://jquery.keicode.com/ui/autocomplete.php

Developerツール(右クリック&要素の検証)で見られるんですね。

スクリーンショット 2016-04-16 17.03.54.png

デベロッパツールの表示はこんな感じ。

スクリーンショット 2016-04-16 16.44.02.png

<input type="text" id="ac1"/>に対するEvent Listenersはこんな。

スクリーンショット 2016-04-16 17.02.51.png

この場合、 <input type="text" id="ac1"/> には
blur,click,focus,input,keydown,keypress,mouseup,remove
のイベントに対して、jquery-ui-1.10.4.min.jsの6行目がListenしています。

他人のJavascriptがなんのイベントを拾って実装しているのかが丸裸になります。自分の実装の参考にできるのでいいですね。

jquery ui の autocomplete を真似た実装がしたかったので、inputのどんなイベントをListenしているのか見たかったのですが、onchangeだけbindしとけばいいかなーとおもってたら全然違ってた。アハハ。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2