Analysis of the difference between event objects in JS and JQ_javascript skills

Code test:

Copy code The code is as follows:

test text

<script> <br> test.addEventListener('click', function(e){console.log(e);}, false), <br> $('#test').on('click', function(e){console.log(e)}); <br> </script>

Result analysis:

Copy code The code is 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,
target: div#test /*The target of jq-evt is not necessarily the element matched by the jQuery selector. It may be the first element to capture the event, and then when it bubbles up, one of the elements will be the element matched by the selector*/
},
js-jq-event-diff:{
currentTarget: null/*seems to be generally null*/
|| div#test/*The elements matched by the jq selector are 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 is 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
}

Summary:

In the event parameters of js, whether it is target, toElement, or srcElement, they all point to the first element that triggers the event (it has not bubbled up yet), and fromElement is null in the click event, so if you set it to include many The element's parent container parent event, then the event is likely to be triggered by the child element of this parent.
Therefore, in actual applications, if you want to refer to parent, you can only use this
In the event parameter of jq,
currentTarget is the element that matches your selector, which is the element you want;
delegateTarget is the element that is listening for events and belongs to the delegated element
The target is the same as the target in the event parameter of js. It is the first element that triggers the event. It is not as useful as currentTarget (not necessarily, such as the application in the bodyclick event)
Some students may say that if you want to directly reference the element that is subject to device events, just use this. Why bother to understand currentTarget and target. This idea proves that you are just using jQuery and have never used tools like Backbone.

Backbone binds this in many places, so it is not possible to use this in its functions:

Copy code The code is as follows:

var view = Backbone.View.extend({
el: document.body,
events: {
'click p': 'showText' // Delegate body to monitor the click event of p },
showText: function(e){
var p = e.currentTarget; // [currentTarget] Gets the element matched by the selector this.log(p.innerHTML); // As you can see, this does not point to the p element },
Log: function(msg){
console.log(msg);
}
});

Although the event objects in JS and JQ are similar, there are still some differences. Do you understand it?