ライブラリのページにカスタマイズ可能なフォーム要素があります。使用するイベントハンドラーを見つけようとしているので、JavaScriptイベントを操作したときに発生するJavaScriptイベントを確認したいと思います。
Chrome Web Developerを使用してそれを行うにはどうすればよいですか?
ライブラリのページにカスタマイズ可能なフォーム要素があります。使用するイベントハンドラーを見つけようとしているので、JavaScriptイベントを操作したときに発生するJavaScriptイベントを確認したいと思います。
Chrome Web Developerを使用してそれを行うにはどうすればよいですか?
同様に、対象の要素を右クリック -> [要素の検査] を選択します。開発フレームの右側を下にスクロールすると、一番下に「イベント リスナー」があります。ツリーを展開して、要素に関連付けられているイベントを確認します。これがバブリングによって処理されるイベントで機能するかどうかはわかりません (私はそうではないと思います)
monitorEvents関数を使用できます。
要素を検査するだけで(right mouse click
→Inspect
表示されている要素で、またはElements
Chrome 開発者ツールのタブに移動して必要な要素を選択します)、Console
タブに移動して次のように記述します。
monitorEvents($0)
この要素の上にマウスを移動するか、フォーカスするかクリックすると、発生したイベントの名前がそのデータとともに表示されます。
このデータの取得を停止するには、これをコンソールに書き込むだけです:
unmonitorEvents($0)
$0
は、Chrome デベロッパー ツールによって選択された最後の DOM 要素です。そこに他の DOM オブジェクトを渡すことができます (たとえば、getElementById
またはの結果querySelector
)。
イベント「タイプ」を 2 番目のパラメータとして指定して、監視対象のイベントを事前定義されたセットに絞り込むこともできます。例えば:
monitorEvents(document.body, 'mouse')
この利用可能なタイプのリストはこちらです。
この機能がどのように機能するかを示す小さな gif を作成しました。
jquery プラグインの場合にスクリプトが作成するようなカスタム イベントは表示されません。例えば :
jQuery(function($){
var ThingName="Something";
$("body a").live('click', function(Event){
var $this = $(Event.target);
$this.trigger(ThingName + ":custom-event-one");
});
$.on(ThingName + ":custom-event-one", function(Event){
console.log(ThingName, "Fired Custom Event: 1", Event);
})
});
Chrome 開発者ツールのスクリプトのイベント パネルに「Something:custom-event-one」が表示されない