Code Test:
The code copy is 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:
The code copy 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 /*jq-evt's target is not necessarily an element that matches the jQuery selector, it may be the first element that captures the event, and then bubbling upwards one of them is the element that matches the selector*/
},
js-jq-event-diff:{
currentTarget: null/*It seems that it is usually null*/
|| div#test/*jq selector matches elements 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,
details: 1,
keyCode: 0,
layerX: 58,
layerY: 13,
returnValue: true
},
jq-event-solo: {
buttons: undefined,
data: undefined,
delegateTarget: div#test/*Who is listening? That's the element. */,
isDefaultPrevented: function,
handleObj: Object,
jQuery211024030584539286792: true,
originalEvent: MouseEvent,
shiftKey: false
}
body-click-delegate-event: {
currentTarget: HTMLBodyElement,
delegateTarget: HTMLBodyElement,
target: HTMLDivElement
}
Summarize:
In the event parameter of js, whether it is target, toElement, and srcElement, they point to the first element that triggers the event (not bubbling yet), and fromElement is null in the click event. Therefore, if you set the parent event with a lot of elements, the triggering event is likely to be the child element of this parent.
Therefore, in actual application, if you want to reference 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 an element that is listening for events and belongs to the delegated element.
The target in the event parameter of the same js is the first element that triggers the event, and it is not as useful as the currentTarget (not necessarily, for example, the application in the bodyclick event)
Some students may say that you need to directly reference the elements of the device event and use this. Why 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 using this in its functions is not possible:
The code copy is as follows:
var view = Backbone.View.extend({
el: document.body,
events: {
'click p': 'showText' // Delegate body to listen for p's click event},
showText: function(e){
var p = e.currentTarget; // [currentTarget] Get the element matching the selector this.log(p.innerHTML); // I saw it, 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?