javascript - jQuery console.log（）とalert（）

Question

jQueryコード：

$(document).bind('click', function(e) {
    console.log(e.target);
    alert(e.target);
});

e.targetには、クリックされているオブジェクトの名前が含まれています。デモンストレーションの目的で、入力要素をクリックすると、上記のコードは次のように出力し
ますconsole.log()。

<input class="buton" type="submit" value="Send" name="Send">

の場合alert()：

[object HTMLInputElement]

ただし、に置き換えるconsole.log(e.target)とconsole.log(e.target.toString())、と同じものが出力されますalert()。つまり、次のようになります。

[object HTMLInputElement]

私のスコープは、によって返されたHTMLコードconsole.log()を変数に格納することですが、動作を理解できません。

Answer 1

イベント ハンドラーでe.targetは、クリックの発生元の要素です。ほとんどのブラウザー コンソールは、要素を表す html 文字列としてこれを表示します。

を使用するalertと、指定された引数が文字列に変換されるため、 が表示されます[object HTMLInputElement]。

要素の HTML にアクセスするには、次を使用します。

alert(e.target.outerHTML);

Answer 2

console.logオブジェクトのプロパティを表示したいが、オブジェクトalert()のタイプのみを表示する場合に便利です。要素の実際の html を表示したい場合outerHTMLは、DOM Element オブジェクトのプロパティを使用できます。

alert(e.target.outerHTML);

http://jsfiddle.net/phLVu/

Answer 3

この他のSOの質問を参照してください：

outerHTML属性を使用する必要があります。

$(document).bind('click', function(e) {
    alert(e.target.outerHTML);
});

ここで jsFiddle を参照してください: http://jsfiddle.net/xhHPb/

Answer 4

toString()コンソールツールは、デザイナーが便利だと思った方法でオブジェクトを表示します。とは異なり、オブジェクトのメソッドを呼び出すだけではありませんalert。

ターゲットのHTMLコードを取得したい場合は、次のようにします。

var html = e.target.outerHTML;