Javascript / jQuery：为什么使用<a>标记Vs</a>对event.target使用不同的结果<a>。</a> <a>console.log中的其他元素，请注意$（this）的alert（）</a>

Question

There seems to be something worth understanding when handling DOM using event.log.

Comparing the results in an alert and the console.log in firebug.

I have this Code HTML:

<div>Click Me < Div ></div>
<a href="#">Click Me < a ></a> 

and JS:

$(function(){
    $('div').click(function(e){

        console.log(e.target);
        console.log($(this));
        alert(e.target)
        alert($(this))
    })

    $('a').click(function(e){
       e.preventDefault();

        console.log(e.target);
        console.log($(this));

        alert(e.target)
        alert($(this))
    })
})

When the Div or is Clicked:

The console.log of both work as expect

But the alert s show up with different outputs:

For DIV:

1 objectHTMLDivElement
2 object Object //using jQuery's $(this)

However, when the <a> tag is Clicked it yields:

1 The web address or the href attribute's value

2 object Object //using jQuery's $(this)

Why is this the case? Why doesn't the alert of <a> print this tag as being the HTMLElement?

Please test for yourself here: http://jsfiddle.net/hWR53/1/

Answer 1

All objects, among them elements, have a toString function , and this toString function is called on the object to build what is displayed in the alert.

For most objects, this function returns "[object Object]" but instances of a elements have it overridden to return the value of the href property of the element.