The difference Analysis _javascript skill of JS and JQ event object

Code test:

Copy Code code as follows:

<div id= "Test" ><p>test text<p></div>
<script src= "Vendor/jquery-2.1.1.js" ></script>
<script>
Test.addeventlistener (' click ', Function (e) {console.log (e);}, False),
$ (' #test '). On (' click ', Function (e) {Console.log (e)});
</script>

Results Analysis:

Copy Code code as follows:

js-jq-event-common:{
Altkey:false,
Bubbles:true,
button:0,
Cancelable:true,
CLIENTX:58,
Clienty:13,
Ctrlkey:false,
OFFSETX:50,
Offsety:5,
PAGEX:58,
Pagey:13,
SCREENX:58,
screeny:122,
View:window,
Which:1,
Type: ' Click ',
timestamp:1407761742842,
Metakey:false,
Relatedtarget:null,
The target of the target:div#test/*jq-evt is not necessarily the element that the jquery selector matches, may be the first element to capture the event, and one of the elements that is the selector match when it bubbles up.
},
js-jq-event-diff:{
Currenttarget:null/* seems to be null*/.
|| The DIV#TEST/*JQ selector matches the element in the [Currenttarget] attribute * *.
eventphase:0 | | 2,
Toelement:div#test
},
js-event-solo:{
X:58,
Y:13,
Cancelbubble:false,
charcode:0,
Clipboarddata:undefined,
Datatransfer:null,
Defaultprevented:false,
Srcelement:div#test,
Fromelement:null,
Detail:1,
keycode:0,
LAYERX:58,
Layery:13,
Returnvalue:true
},
Jq-event-solo: {
Buttons:undefined,
Data:undefined,
Delegatetarget:div#test/*, who's listening? This is the element. */,
Isdefaultprevented:function,
Handleobj:object,
Jquery211024030584539286792:true,
Originalevent:mouseevent,
Shiftkey:false
}
Body-click-delegate-event: {
Currenttarget:htmlbodyelement,
Delegatetarget:htmlbodyelement,
Target:htmldivelement
}

Summarize:

JS's event parameter, whether Target, Toelement, srcelement is the element that points to the first triggering event (not bubbling), and fromelement is null in the Click event, so If you are setting up a parent event with many elements in it, the trigger event is likely to be the child element of this parent.
Therefore, in practical applications, if you want to quote parent, you can only use this
In the event argument for JQ,
Currenttarget is the element that matches your selector, the element you want;
Delegatetarget is the element that listens to the event, belongs to the entrusted element
Target in the event parameter of the JS is the first element that triggers the event, no currenttarget useful (and not necessarily, for example, in the Bodyclick event)
Some students may say that you have to refer directly to the elements of the device event with this, why understand Currenttarget and target. The idea is that you're just using jquery, and you've never used a tool like backbone.

Backbone is bound to this in many places, so it is not possible to use this in its function:

Copy Code code as follows:

var view = Backbone.View.extend ({
El:document.body,
Events: {
' Click P ': ' Showtext '//delegate body listens for P's Click event},
Showtext:function (e) {
var p = e.currenttarget;    [Currenttarget] Gets the element This.log (p.innerhtml) that the selector matches; See, this does not point to P element},
Log:function (msg) {
Console.log (msg);
}
});

Although the event object in the JS,JQ is similar, but there are some differences, whether we understand it?