Analyse de la différence entre les objets événementiels dans les compétences JS et JQ_javascript

Test de code :

Copier le code Le code est le suivant :

texte de test

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



Analyse des résultats :

Copier le code Le code est le suivant : js-jq-event-common :{

altKey : faux,

bulles : vrai,
bouton : 0,
annulable : vrai,
clientX : 58,
clientY : 13,
ctrlKey : faux,
offsetX : 50,
décalageY : 5,
pageX : 58,
page Y : 13,
écranX : 58,
écranY : 122,
vue : Fenêtre,
dont : 1,
Tapez : 'cliquez',
horodatage : 1407761742842,
métaKey : faux,
RelatedTarget : null,
target: div#test /*La cible de jq-evt n'est pas nécessairement l'élément correspondant au sélecteur jQuery. Il peut s'agir du premier élément à capturer l'événement, puis lorsqu'il apparaîtra, l'un des éléments sera l'élément. correspondant par le sélecteur*/
},
js-jq-event-diff :{
currentTarget : null/*semble être généralement nul*/
|| div#test/*Les éléments correspondant au sélecteur jq sont dans l'attribut [currentTarget]*/,
événementPhase : 0 || 2,
toElement : div#test
},
js-event-solo :{
x : 58,
y : 13,
CancelBubble : faux,
charCode : 0,
clipboardData : non défini,
transfert de données : nul,
defaultPrevented : faux,
srcElement : div#test,
fromElement : nul,
détail : 1,
code clé : 0,
coucheX : 58,
coucheY : 13,
valeur de retour : vrai
},
jq-event-solo : {
boutons : non défini,
données : non défini,
déléguéTarget : div#test/*Qui écoute ? C'est l'élément. */,
isDefaultPrevented : fonction,
handleObj : Objet,
jQuery211024030584539286792 : vrai,
événement original : événement souris,
ShiftKey : faux
}
corps-clic-délégué-événement : {
cible actuelle : HTMLBodyElement,
déléguéTarget : HTMLBodyElement,
cible : HTMLDivElement
>



Résumé :

Dans les paramètres d'événement de js, qu'il s'agisse de target, toElement ou srcElement, ils pointent tous vers le premier élément qui déclenche l'événement (il n'a pas encore bouillonné), et fromElement est nul dans l'événement click, donc si vous le configurez pour inclure de nombreux événements parent du conteneur parent de l'élément, alors l'événement est susceptible d'être déclenché par l'élément enfant de ce parent.

Par conséquent, dans les applications réelles, si vous souhaitez faire référence au parent, vous ne pouvez utiliser que ceci

Dans le paramètre d'événement de jq,

currentTarget est l'élément qui correspond à votre sélecteur, qui est l'élément souhaité
; déléguéTarget est l'élément qui écoute les événements et appartient à l'élément délégué
La cible est la même que la cible dans le paramètre event de js. C'est le premier élément qui déclenche l'événement. Ce n'est pas aussi utile que currentTarget (pas nécessairement, comme l'application dans l'événement bodyclick)
. Certains étudiants peuvent dire que si vous souhaitez référencer directement l'élément soumis aux événements de l'appareil, utilisez simplement ceci. Pourquoi s'embêter à comprendre currentTarget et target. Cette idée prouve que vous utilisez simplement jQuery et que vous n'avez jamais utilisé d'outils comme Backbone.

Backbone lie ceci à de nombreux endroits, il n'est donc pas possible de l'utiliser dans ses fonctions :

Copier le code Le code est le suivant : var view = Backbone.View.extend({

el: document.body,

événements : {
'click p' : 'showText' // Corps du délégué pour surveiller l'événement click de p },
showText : fonction(e){
var p = e.currentTarget; // [currentTarget] Récupère l'élément correspondant au sélecteur this.log(p.innerHTML); // Comme vous pouvez le voir, cela ne pointe pas vers l'élément p },
Journal : function(msg){
console.log(msg);
}
});

Bien que les objets événementiels dans JS et JQ soient similaires, il existe encore quelques différences.