Analyse des Unterschieds zwischen Ereignisobjekten in JS- und JQ_Javascript-Kenntnissen

Codetest:

Code kopieren Der Code lautet wie folgt:

testtext

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



Ergebnisanalyse:

Code kopieren

Der Code lautet wie folgt: js-jq-event-common:{ altKey: false,

Blasen: wahr,

Schaltfläche: 0,
stornierbar: wahr,
clientX: 58,
KundeY: 13,
StrgTaste: false,
offsetX: 50,
offsetY: 5,
SeiteX: 58,
SeiteY: 13,
screenX: 58,
screenY: 122,
Ansicht: Fenster,
Welche: 1,
Geben Sie ein: „Klick“,
Zeitstempel: 1407761742842,
metaKey: false,
relatedTarget: null,
Ziel: div#test /*Das Ziel von jq-evt ist nicht unbedingt das vom jQuery-Selektor übereinstimmende Element. Es kann das erste Element sein, das das Ereignis erfasst, und wenn es dann in die Luft sprudelt, ist eines der Elemente das Element übereinstimmend mit dem Selektor*/
},
js-jq-event-diff:{
currentTarget: null/*scheint im Allgemeinen null zu sein*/
||. div#test/*Die vom jq-Selektor übereinstimmenden Elemente befinden sich im Attribut [currentTarget]*/,
eventPhase: 0 ||. 2,
toElement: div#test
},
js-event-solo:{
x: 58,
Jahr: 13,
cancelBubble: false,
charCode: 0,
ClipboardData: undefiniert,
dataTransfer: null,
defaultPrevented: false,
srcElement: div#test,
fromElement: null,
Detail: 1,
Schlüsselcode: 0,
LayerX: 58,
SchichtY: 13,
returnValue: true
},
jq-event-solo: {
Schaltflächen: undefiniert,
Daten: undefiniert,
DelegateTarget: div#test/*Wer hört zu? Das ist das Element. */,
isDefaultPrevented: Funktion,
handleObj: Objekt,
jQuery211024030584539286792: wahr,
originalEvent: MouseEvent,
ShiftKey: false
}
body-click-delegate-event: {
currentTarget: HTMLBodyElement,
DelegateTarget: HTMLBodyElement,
Ziel: HTMLDivElement
}



Zusammenfassung:

In den Ereignisparametern von js, egal ob target, toElement oder srcElement, verweisen sie alle auf das erste Element, das das Ereignis auslöst (es ist noch nicht aufgetaucht), und fromElement ist im Click-Ereignis null, also Wenn Sie es so einstellen, dass es viele übergeordnete Ereignisse des übergeordneten Containers des Elements enthält, ist das Ereignis höchstwahrscheinlich das untergeordnete Element dieses übergeordneten Elements. Wenn Sie in tatsächlichen Anwendungen auf übergeordnete Elemente verweisen möchten, können Sie daher nur dieses

verwenden Im Ereignisparameter von jq,

currentTarget ist das Element, das Ihrem Selektor entspricht, also dem gewünschten Element

DelegateTarget ist das Element, das auf Ereignisse wartet und zum delegierten Element
gehört Das Ziel ist dasselbe wie das Ziel im Ereignisparameter von js. Es ist das erste Element, das das Ereignis auslöst. Es ist nicht so nützlich wie currentTarget (nicht unbedingt, wie die Anwendung im Bodyclick-Ereignis). Einige Schüler sagen möglicherweise, dass Sie, wenn Sie direkt auf das Element verweisen möchten, das Geräteereignissen unterliegt, Folgendes verwenden sollten: Warum sollten Sie sich die Mühe machen, currentTarget und target zu verstehen? Diese Idee beweist, dass Sie nur jQuery verwenden und noch nie Tools wie Backbone verwendet haben.

Backbone bindet dies an vielen Stellen, daher ist es nicht möglich, dies in seinen Funktionen zu verwenden:

Code kopieren

Der Code lautet wie folgt: var view = Backbone.View.extend({ el: document.body, Ereignisse: {

'click p': 'showText' // Körper delegieren, um das Klickereignis von p zu überwachen },

showText: function(e){
var p = e.currentTarget; // [currentTarget] Ruft das vom Selektor passende Element ab this.log(p.innerHTML); // Wie Sie sehen können, zeigt dies nicht auf das p-Element },
Protokoll: function(msg){
console.log(msg);
}
});

Obwohl die Ereignisobjekte in JS und JQ ähnlich sind, gibt es dennoch einige Unterschiede