Codetest:
Die Codekopie lautet wie folgt:
<div id = "test"> <p> Testtext <p> </div>
<script src = "Vendor/jQuery-2.1.1.js"> </script>
<Script>
test.adDeVentListener ('Click', Funktion (e) {console.log (e);}, false),
$ ('#test'). on ('click', function (e) {console.log (e)});
</script>
Ergebnisanalyse:
Die Codekopie lautet wie folgt:
JS-JQ-EVENT-COMMON: {
Altkey: Falsch,
Blasen: wahr,
Taste: 0,
Abbrechen: Richtig,
Clientx: 58,
Clienty: 13,
Strlkey: Falsch,
OffsetX: 50,
Offsety: 5,
Pagex: 58,
Pagey: 13,
Screenx: 58,
Siebschild: 122,
Ansicht: Fenster,
was: 1,
Geben Sie: "Klicken",
Zeitstempel: 1407761742842,
Metakey: Falsch,
Verwandte Target: NULL,
Ziel: Div#Test /*JQ-EVTs Ziel ist nicht unbedingt ein Element, das dem Jquery-Selektor entspricht. Es kann das erste Element sein, das das Ereignis erfasst und dann eines davon nach oben sprudelt, ist das Element, das dem Selektor entspricht* /
},
JS-JQ-EVENT-DIFF: {
CurrentTarget: null/*Es scheint, dass es normalerweise null ist*/
|| Div#Test/*JQ Selector entspricht den Elementen im [CurrentTarget] -attribut*/,.
EventPhase: 0 || 2,
Toelement: Div#Test
},
JS-Event-Solo: {
x: 58,
y: 13,
CancelBubble: Falsch,
Charcode: 0,,
ClipboardData: undefiniert,
Datatransfer: NULL,
Standardprevented: Falsch,
srcelement: div#test,
von der Ausführung: null,
Details: 1,
Schlüsselcode: 0,,
Layerx: 58,
Schichten: 13,
returnValue: true
},
JQ-Event-Solo: {
Knöpfe: undefiniert,
Daten: undefiniert,
delegatetarget: div#test/*Wer hört zu? Das ist das Element. */,
isDefaultPrevented: Funktion,
HandleObj: Objekt,
JQuery211024030584539286792: True, true,
originalEvent: mouseevent,
ShiftKey: Falsch
}
Body-Click-Delegate-Event: {
CurrentTarget: htmlbodyElement,
delegatetarget: htmlbodyElement,
Ziel: htmldelement
}
Zusammenfassen:
Im Ereignisparameter von JS, unabhängig davon, ob es sich um Ziel, Toelement und SRCelement handelt, weisen sie auf das erste Element hin, das das Ereignis auslöst (noch nicht sprudeln), und von der Ausführung ist im Klickereignis null. Wenn Sie das übergeordnete Ereignis mit vielen Elementen festlegen, ist das Auslöser -Ereignis wahrscheinlich das untergeordnete Element dieses Elternteils.
Daher können Sie in der tatsächlichen Anwendung dies nur verwenden, wenn Sie über Eltern verweisen möchten
Im Ereignisparameter von JQ,
CurrentTarget ist das Element, das Ihrem Selektor entspricht. Dies ist das gewünschte Element.
Delegatetarget ist ein Element, das nach Ereignissen hört und zum delegierten Element gehört.
Das Ziel im Ereignisparameter desselben JS ist das erste Element, das das Ereignis auslöst, und es ist nicht so nützlich wie das CurrentTarget (nicht unbedingt die Anwendung im BodyClick -Ereignis)
Einige Schüler können sagen, dass Sie die Elemente des Geräteereignisses direkt verweisen und dies verwenden müssen. Warum CurrentTarget und Target 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:
Die Codekopie lautet wie folgt:
var view = backbone.view.extend ({{
EL: Dokument.body,
Ereignisse: {
'Klicken Sie auf P': 'showText' // Körper delegieren, um das Klick -Ereignis von P zu hören}.
showText: function (e) {
var p = e.currentTarget; // [CurrentTarget] das Element abrufen, das dem Selektor this.log (P.innerhtml) entspricht; // Ich habe es gesehen, das zeigt nicht auf das P -Element},
log: function (msg) {
console.log (msg);
}
});
Obwohl die Ereignisobjekte in JS und JQ ähnlich sind, gibt es immer noch einige Unterschiede. Verstehst du?