Teste de código:
A cópia do código é a seguinte:
<div id = "test"> <p> Texto de teste <P> </div>
<script src = "fornecedor/jQuery-2.1.1.js"> </sCript>
<Cript>
test.addeventListener ('click', function (e) {console.log (e);}, false),
$ ('#teste'). on ('clique', function (e) {console.log (e)});
</script>
Análise de resultados:
A cópia do código é a seguinte:
JS-JQ-Event-Common: {
altkey: falso,
Bolhas: verdadeiro,
Botão: 0,
Cancelável: verdadeiro,
ClientX: 58,
Cliente: 13,
Ctrlkey: falso,
Offsetx: 50,
Offsety: 5,
PageX: 58,
Pagey: 13,
Screenx: 58,
Screeny: 122,
Visualização: janela,
Qual: 1,
Tipo: 'Clique',
Timestamp: 1407761742842,
Metakey: falso,
RelatedTarget: null,
Alvo: Div#Test /*O alvo de JQ-EVT não é necessariamente um elemento que corresponde ao seletor de jQuery, pode ser o primeiro elemento que captura o evento e depois borbulhar um deles é o elemento que corresponde ao seletor* /
},
JS-JQ-Event-Diff: {
CurrentTarget: null/*parece que geralmente é nulo*/
|| Div#Test/*seletor JQ corresponde a elementos no atributo [currentTarget]*/,,
EventPhase: 0 || 2,
Toelement: DIV#Teste
},
JS-EVENT-SOLO: {
x: 58,
y: 13,
cancelbubble: false,
Charcode: 0,
CLIPboardData: indefinido,
DataTransfer: NULL,
DefaultPrevented: false,
SRCELEMENT: DIV#TEST,
FromElement: null,
Detalhes: 1,
Keycode: 0,
camada: 58,
Layery: 13,
ReturnValue: True
},
JQ-Event-Solo: {
Botões: indefinido,
Dados: indefinido,
DelegateTarget: div#test/*Quem está ouvindo? Esse é o elemento. */,
ISDefaultPrentEd: function,
handleobj: objeto,
jQuery211024030584539286792: true,
Originalevent: mouseevent,
ShiftKey: Falso
}
BOLDLIFELL Clique-Delegate-Event: {
CurrentTarget: htmlbodyelement,
delegateTarget: htmlbodyelement,
Alvo: htmlatorlement
}
Resumir:
No parâmetro de eventos de JS, seja alvo, toelement e srcement, eles apontam para o primeiro elemento que aciona o evento (ainda não borbulhando), e o FromElement é nulo no evento de cliques. Portanto, se você definir o evento pai com muitos elementos, é provável que o evento desencadeador seja o elemento filho desse pai.
Portanto, na aplicação real, se você deseja fazer referência ao pai, você só pode usar isso
No parâmetro de evento de JQ,
CurrentTarget é o elemento que corresponde ao seu seletor, que é o elemento que você deseja;
DelegateTarget é um elemento que está ouvindo eventos e pertence ao elemento delegado.
O alvo no parâmetro de evento do mesmo JS é o primeiro elemento que aciona o evento, e não é tão útil quanto o CurrentTarget (não necessariamente, por exemplo, o aplicativo no evento BodyClick)
Alguns alunos podem dizer que você precisa fazer referência diretamente aos elementos do evento do dispositivo e usar isso. Por que entender o CurrentTarget e o Target? Essa ideia prova que você está apenas usando o jQuery e nunca usou ferramentas como backbone.
Não é possível o backbone em muitos lugares, portanto, usar isso em suas funções não é possível:
A cópia do código é a seguinte:
var view = backbone.view.extend ({
El: document.body,
Eventos: {
'Clique em P': 'ShowText' // Delegate Body para ouvir para o evento de cliques de P},
showText: function (e) {
var p = e.currentTarget; // [CurrentTarget] Obtenha o elemento que corresponde ao seletor this.log (p.innerhtml); // eu vi isso, isso não aponta para o elemento P},
LOG: function (msg) {
console.log (msg);
}
});
Embora os objetos do evento em JS e JQ sejam semelhantes, ainda existem algumas diferenças. Você entende?