jQuery console.log（）vs 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.toString())替换console.log(e.target) ，它会打印与alert()相同的内容，这意味着：

[object HTMLInputElement]

我的范围是将console.log()返回的HTML代码存储到变量中，但我无法理解该行为。

Answer 1

在事件处理程序中， e.target是单击源自的元素。 大多数浏览器控制台将其显示为表示元素的html字符串。

当您使用alert ，提供的参数将转换为字符串，因此您将看到[object HTMLInputElement] 。

要获取元素的HTML，请使用：

alert(e.target.outerHTML);

Answer 2

当你想要查看对象的属性时， console.log非常有用，但是alert()只显示对象的类型，如果要查看元素的真实html，可以使用DOM Element对象的outerHTML属性：

alert(e.target.outerHTML);

Answer 3

看到这个其他的问题：

您必须使用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;