Test de code:
La copie de code est la suivante:
<div id = "test"> <p> Test Text <p> </div>
<script src = "vendeur / jQuery-2.1.1.js"> </ script>
<cript>
test.addeventListener ('click', fonction (e) {console.log (e);}, false),
$ ('# test'). sur ('click', fonction (e) {console.log (e)});
</cript>
Analyse des résultats:
La copie de code est la suivante:
JS-JQ-EVENT-COMMON: {
Altkey: Faux,
Bubbles: vrai,
Bouton: 0,
Annuléable: vrai,
Clientxx: 58,
Client: 13,
Ctrlkey: False,
Offsetx: 50,
Offsence: 5,
Pagex: 58,
Pagey: 13,
Screenx: 58,
Screeny: 122,
Affichage: fenêtre,
qui: 1,
Type: «Cliquez»,
Timestamp: 1407761742842,
metakey: faux,
RelatedTarget: null,
Target: Div # Test / * JQ-EVT La cible n'est pas nécessairement un élément qui correspond au sélecteur jQuery, c'est peut-être le premier élément qui capture l'événement, puis bouillonner vers le haut, l'un d'eux est l'élément qui correspond au sélecteur * /
},
JS-JQ-EVENT-DIFF: {
currentTarget: null / * Il semble qu'il soit généralement nul * /
|| Div # test / * JQ Selector correspond aux éléments dans l'attribut [currentTarget] * /,
EventHase: 0 || 2,
Toelement: Div # Test
},
JS-Event-Solo: {
X: 58,
Y: 13,
CancelBubble: False,
Charcode: 0,
Clips de presse: indéfini,
Datatransfer: null,
DefaultPreveted: False,
srcelement: div # test,
FromElement: null,
Détails: 1,
Keycode: 0,
couchex: 58,
Layery: 13,
returnValue: vrai
},
JQ-Event-Solo: {
Boutons: indéfini,
Données: indéfinie,
DelegateTarget: Div # test / * Qui écoute? C'est l'élément. * /,
IsdefaultPreveted: fonction,
handleobj: objet,
jQuery211024030584539286792: vrai,
Originalevent: Mouseevent,
Shiftkey: Faux
}
Body-Click-Delegate-Event: {
CurrentTarget: htmlbodyElement,
DelegateTarget: htmlbodyElement,
cible: htmldively
}
Résumer:
Dans le paramètre de l'événement de JS, qu'il s'agisse de Target, Toelement et Srcelement, ils pointent vers le premier élément qui déclenche l'événement (pas encore bouillonnant), et FromElement est nul dans l'événement cliqueur. Par conséquent, si vous définissez l'événement parent avec de nombreux éléments, l'événement déclenchant est probablement l'élément enfant de ce parent.
Par conséquent, dans l'application réelle, si vous souhaitez référencer le parent, vous ne pouvez utiliser que
Dans le paramètre de l'événement de JQ,
CurrentTarget est l'élément qui correspond à votre sélecteur, qui est l'élément que vous souhaitez;
DelegateTarget est un élément qui écoute des événements et appartient à l'élément délégué.
La cible dans le paramètre de l'événement du même JS est le premier élément qui déclenche l'événement, et il n'est pas aussi utile que le CurrentTarget (pas nécessairement, par exemple, l'application dans l'événement BodyClic))
Certains étudiants peuvent dire que vous devez référencer directement les éléments de l'événement de l'appareil et l'utiliser. Pourquoi comprendre CurrentTarget et Target? Cette idée prouve que vous utilisez simplement jQuery et que vous n'avez jamais utilisé d'outils comme Backbone.
L'épine dorsale le lie à de nombreux endroits, donc l'utiliser dans ses fonctions n'est pas possible:
La copie de code est la suivante:
var View = Backbone.View.Extend ({
el: document.body,
Événements: {
'cliquez sur P': 'showText' // Deléguer le corps pour écouter l'événement de clic de P},
showText: fonction (e) {
var p = e.currentTarget; // [currentTarget] Obtenez l'élément correspondant au sélecteur this.log (P.InnerHtml); // je l'ai vu, cela ne pointe pas vers l'élément p},
journal: fonction (msg) {
console.log (msg);
}
});
Bien que les objets de l'événement dans JS et JQ soient similaires, il y a encore quelques différences. Est-ce que tu comprends?