ホームページ  >  記事  >  ウェブフロントエンド  >  HTML要素にバインドされたイベントメソッドを使用した強力なツールの共有

HTML要素にバインドされたイベントメソッドを使用した強力なツールの共有

高洛峰
高洛峰オリジナル
2017-03-20 16:51:131319ブラウズ

WEB 標準は、構造、パフォーマンス、動作の分離を提唱しています。 現在、この方法でパフォーマンスと動作を採用する人が増えていますが、Web ページには大量の JavaScript が読み込まれます。 , どの要素とどのアクションが最終的に イベント、特に JavaScriptloading イベントに最終的にバインドされているかをさまざまな方法で把握することは困難ですが、これは jQuery を介して行うことができます。 }, element.addEventListener ()...、すべてのイベントを 1 か所で見つけるのは困難です。インシデントの詳細を把握できない場合、次の 2 つの強力なツールに遭遇するまで、特定のクリック アクションの背後にある動作を追跡するのは少し難しくなります。

Chrome デベロッパー ツール には、以下の図に示すように、HTML 要素 バインディング イベント を表示する機能があります。 using using プラグイン Chrome Web Store - Visual Event

の動作原理。

Visual EventHTML要素にバインドされたイベントメソッドを使用した強力なツールの共有 は、主要な JavaScript ライブラリ (jQuery、YUI、ExtJS など) のイベント メカニズムに精通しているため、イベントを詳細に取得し、要素上の

オブジェクトにマークを付けることができます。現在サポートされている JS ライブラリは次のとおりです:

DOM 0 events

jQuery 1.2+YUI 2MooTools 1.2+Prototype 1.6+Glow

有効にすると、マウスが留まると要素は青いブロックでマークされます イベントの詳細は次のとおりです。表示されます。下の写真に示すように:





以上がHTML要素にバインドされたイベントメソッドを使用した強力なツールの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。