1

jQueryイベントを追加した場合、たとえばclick（）：

$(element).click(function() {
    debugger;
    //Some code
});

ブレークポイントを使用するとき、またはコンソールを使用するときに、DOM要素のプロパティ（Chromeの開発ツールなど）を参照しても、そのクリックイベントを見つけることはできません。例：

console.log(element);

ただし、次のような操作を行うと、要素のイベントを見つけることができることがわかりました。

//Finds all events for <img> tags within the scope of
//the HTML-element with the id "container".
var elementsToFindEventsFor = $("img", $("#container"));
var events = [];
$(elementsToFindEventsFor).each(function(i, element) {
    events.push($._data(element, "events"));
});
console.log(events);

jsFiddle： http: //jsfiddle.net/Muskar/Mf9Eb/

これにより、デバッグ時に返された要素のイベントを参照することができますが、デバッグを行うために5行のコードを記述するのはあまり便利ではありません。

それで、私が見つけられなかったjQuery APIからのより読みやすく、書きやすいソリューションがあるかどうかを知りたいのですが？

参照：Firebug（または同様のツール）を使用してJavaScript/jQueryイベントバインディングをデバッグする方法

4

2 に答える 2

0

Allan Jardineは、まさにこの目的のために優れたブックマークレットを作成しました。

ビジュアルイベント

Visual Eventは、DOM要素にアタッチされたイベントに関するデバッグ情報を提供するオープンソースのJavascriptブックマークレットです。ビジュアルイベントの表示：

  • イベントが関連付けられている要素
  • 要素に関連付けられているイベントのタイプ
  • イベントで実行されるコードがトリガーされます
  • アタッチされた関数が定義されたソースファイルと行番号（WebkitブラウザーとOperaのみ）

Visual Eventは、独自のコードのデバッグに役立つだけでなく、作成されたWebサイトの数を示す教育ツールとしても使用できます。

Visual Eventはオープンソースソフトウェア（GPLv2）であり、GitリポジトリはGitHubでホストされており、必要に応じてフォークおよび変更できます。

于 2012-09-21T15:44:17.663 に答える
0

これをチェック[フィドル]

各画像に Click と mouseenter の 2 つのイベントを追加しました。

選択した要素の属性を取得するには、イベント引数 (この場合は e) を渡す必要があります。

関数がヒットしたときに debugger() 関数にデバッグ ポイントを配置する場合は、Chrome 開発者ツールを使用します。e 引数に カーソルを合わせると、 handleObjという属性があります。クリックすると、イベントの種類が表示されます。関数を呼び出した..

type属性には、現在のオブジェクトの情報もあります。

于 2012-09-21T15:58:09.330 に答える