Prueba de código:
La copia del código es la siguiente:
<div id = "test"> <p> TEXT TEXT <P> </div>
<script src = "vendor/jQuery-2.1.1.js"> </script>
<script>
test.adDeventListener ('hacer clic', function (e) {console.log (e);}, falso),
$ ('#test'). on ('hacer clic', función (e) {console.log (e)});
</script>
Análisis de resultados:
La copia del código es la siguiente:
JS-JQ-Event-Common: {
Altla: falso,
Burbujas: Verdadero,
Botón: 0,
cancelable: verdadero,
ClientX: 58,
Clienty: 13,
CtrlKey: falso,
offsetX: 50,
Offsety: 5,
Pagex: 58,
Pagey: 13,
Screenx: 58,
Screen: 122,
Vista: ventana,
que: 1,
Tipo: 'Haga clic',
marca de tiempo: 1407761742842,
metakey: falso,
RelatedTarget: NULL,
Target: Div#test /*JQ-EVT El objetivo no es necesariamente un elemento que coincida con el selector de jQuery, puede ser el primer elemento que captura el evento, y luego burbujear hacia arriba uno de ellos es el elemento que coincide con el selector* /
},
JS-JQ-Event-Diff: {
CurrentTarget: null/*parece que generalmente es nulo*/
|| Div#test/*JQ Selector coincide con elementos en el atributo [actualTarget]*/,
EventPhase: 0 || 2,
Toelement: Div#prueba
},
JS-Event-Solo: {
X: 58,
Y: 13,
cancelBubble: falso,
Camenaje: 0,
Data de portapalones: indefinido,
DataTransfer: NULL,
defaultprevented: falso,
srcelement: Div#prueba,
desde element: nulo,
Detalles: 1,
Código de teclas: 0,
Layerx: 58,
Capas: 13,
ReturnValue: verdadero
},
JQ-Event-Solo: {
Botones: indefinido,
Datos: indefinido,
DelegatetArget: Div#test/*¿Quién está escuchando? Ese es el elemento. */,
ISDEFAULTPREVENTION: FUNCIÓN,
HandleObj: Object,
jQuery211024030584539286792: Verdadero,
Originalevent: Mouseevent,
ShiftKey: falso
}
Cuerpo-clic-Delegate-Event: {
CurrentTarget: htmlBodyElement,
delegatetarget: htmlbodyelement,
Objetivo: HTMLDILEMEME
}
Resumir:
En el parámetro de evento de JS, ya sea Target, Toelement y SrCelement, señalan el primer elemento que desencadena el evento (aún no burbujeando), y desde ellimemento es nulo en el evento de clic. Por lo tanto, si establece el evento principal con muchos elementos, es probable que el evento de activación sea el elemento infantil de este padre.
Por lo tanto, en la aplicación real, si desea hacer referencia a los padres, solo puede usar esto
En el parámetro de evento de JQ,
CurrentTarget es el elemento que coincide con su selector, que es el elemento que desea;
DelegatetArget es un elemento que está escuchando eventos y pertenece al elemento delegado.
El objetivo en el parámetro del evento del mismo JS es el primer elemento que desencadena el evento, y no es tan útil como el Torreget Current (no necesariamente, por ejemplo, la aplicación en el evento BodyClick)
Algunos estudiantes pueden decir que debe hacer referencia directamente a los elementos del evento del dispositivo y usarlo. ¿Por qué entender CurrentTarget y Target? Esta idea demuestra que solo está usando jQuery y nunca ha usado herramientas como Backbone.
Backbone vincula esto en muchos lugares, por lo que no es posible usar esto en sus funciones:
La copia del código es la siguiente:
var ver = backbone.view.extend ({
El: Document.Body,
Eventos: {
'Haga clic en P': 'ShowText' // Delegate Body para escuchar el evento de clic de P},
showText: function (e) {
var p = E.CurrentTarget; // [CurrentTarget] Obtenga el elemento que coincida con el selector this.log (p.innerhtml); // Lo vi, esto no apunta al elemento P},
log: function (msg) {
console.log (msg);
}
});
Aunque los objetos del evento en JS y JQ son similares, todavía hay algunas diferencias. ¿Lo entiendes?