Se você usar a escrita menos, faça mais estrutura como o jQuery, inevitavelmente será tentado pelo JS nativo.
Na verdade, a Xiaocai não quer escrever este blog, parece ser muito rudimentar, mas, vendo que ela nem consegue explicar a ligação e desmantelamento de eventos nativos da JS na internet, ela decidiu fazer uma ciência popular.
Primeiro de tudo, Xiaocai não sabe muito, basta compartilhar minhas idéias com você.
Modelo de evento DOM0
Os modelos de eventos estão em constante evolução, e os modelos de eventos iniciais são chamados de nível DOM0.
Modelo de evento DOM0, suportado por todos os navegadores.
Registrar o nome do evento diretamente no objeto DOM é o método de escrita DOM0, como:
A cópia do código é a seguinte:
document.getElementById ("test"). OnClick = function (e) {};
Significa registrar um evento OnClick. Claro, tem o mesmo significado que este escrito:
A cópia do código é a seguinte:
Document.getElementById ("Test") ["onMouseMove"] = function (e) {};
Isso não é nada, são apenas duas maneiras de acessar as propriedades do objeto JS. A forma de [] é principalmente para resolver o problema de que o nome do atributo não é um identificador legal. Por exemplo, objeto.123 deve relatar um erro, mas objeto ["123"] evita esse problema. Ao mesmo tempo, a redação de [] também escreve JS Alive, usando strings para representar o nome do atributo, que pode vincular dinamicamente eventos no tempo de execução.
De volta ao ponto, quando o evento for acionado, um parâmetro E será passado por padrão para representar o objeto de evento. Através de E, podemos obter muitas informações úteis, como as coordenadas do clique, o elemento DOM que desencadeou especificamente o evento etc.
Com base nos eventos DOM0, para o mesmo nó DOM, apenas um pode ser registrado, e o mesmo evento registrado posteriormente substituirá os registrados anteriores. Por exemplo:
A cópia do código é a seguinte:
var btn = document.getElementById ("teste");
btn.onMousemove = function (e) {
alerta ("ok");
};
btn ["onmouseMove"] = function (e) {
alerta ("ok1");
};
O resultado será lançado OK1.
Vamos falar sobre isso a seguir. Quando um evento é acionado, refere -se ao qual o DOM objeta o evento é acionado. Por exemplo:
A cópia do código é a seguinte:
var btn = document.getElementById ("teste");
btn.onMousemove = function (e) {
alerta (this.id);
};
O resultado de saída do teste. Como o evento está registrado no nó DOM com o teste de identificação, quando o evento é acionado, isso representa esse nó DOM. Pode -se entender que o evento é chamado por esse nó DOM.
Portanto, é bastante simples cancelar o evento. Você só precisa registrar o evento novamente e definir o valor como NULL, por exemplo:
A cópia do código é a seguinte:
var btn = document.getElementById ("teste");
btn.OnClick = function (e) {
alerta ("ok");
};
btn.OnClick = null;
O princípio é que o último evento registrado deve substituir o anterior. Defina o último evento registrado como NULL, que despilará o evento.
O assunto ainda não acabou, e o modelo de evento DOM0 também envolve eventos escritos diretamente no HTML. Por exemplo:
A cópia do código é a seguinte:
<div id = "teste" onclick = "Exec ();" > </div>
Os eventos registrados dessa maneira também seguem o princípio da cobertura, e apenas um pode ser registrado e o último entrará em vigor.
A diferença é que o evento registrado dessa maneira é equivalente a chamar uma função dinamicamente (um pouco de avaliação significa); portanto, o objeto de evento não será passado. Ao mesmo tempo, isso aponta para a janela e não é mais o objeto DOM que desencadeia o evento.
Modelo de evento DOM2
Comparado com o DOM0, Shouca entende apenas os dois pontos a seguir:
・ DOM2 suporta o registro de vários mesmos eventos com o mesmo elemento DOM.
・ DOM2 adicionou o conceito de captura e borbulha.
Os eventos DOM2 são gerenciados pelo AddEventListener e RemoveEventListener, é claro, esse é o padrão.
No entanto, o IE8 e os seguintes navegadores criaram o AnextEvent e o destacar correspondentes. Como o Xiaocai é um pouco não intencional, este artigo não o discutirá.
AddEventListener é obviamente o evento de registro. Possui três parâmetros, a saber: "Nome do evento", "retorno de chamada do evento" e "Capture/Bubble". Por exemplo:
A cópia do código é a seguinte:
var btn = document.getElementById ("teste");
btn.addeventListener ("clique", função (e) {
alerta ("ok");
}, false);
Escusado será dizer que o nome do evento não é muito. Comparado com o DOM0, o anterior foi removido.
Os retornos de chamada do evento também são fáceis de entender. Você deve notificá -lo se o evento for acionado! Ao ligar de volta, como o DOM0, um parâmetro de evento será passado por padrão. Ao mesmo tempo, isso se refere ao nó DOM que desencadeia o evento.
O último parâmetro é o tipo booleano, o TRUE representa o evento de captura e o FALSE representa o evento de bolhas. Na verdade, é fácil de entender. Vamos primeiro fazer um diagrama:
Isso significa que, se um elemento aciona um evento, a primeira coisa que é notificada é a janela e depois o documento, e entrará em sequência até o elemento (elemento de destino) que realmente aciona o evento. Este processo é captura. Em seguida, o evento borbulhará do elemento de destino e sairá em sequência até o objeto da janela. Este processo é bolha.
Por que projetar dessa maneira? Isso parece ser devido às suas profundas origens históricas, então Xiaocai não sabe muito sobre isso, então ela não fala bobagem.
A partir disso, podemos ver que o evento de captura é acionado antes do evento Bubble.
Suponha que exista uma estrutura HTML:
A cópia do código é a seguinte:
<div id = "test">
<div id = "testinner"> </div>
</div>
Em seguida, registramos dois eventos de clique na divisão externa, a saber, o evento de captura e o evento borbulhante, o código é o seguinte:
A cópia do código é a seguinte:
var btn = document.getElementById ("teste");
// Catch eventos
btn.addeventListener ("clique", função (e) {
alerta ("ok1");
}, verdadeiro);
// Evento borbulhante
btn.addeventListener ("clique", função (e) {
alerta ("ok");
}, false);
Por fim, clique na div interior, primeiro pop -up OK1 e depois apareça ok. Combinado com o diagrama esquemático acima, a divisão externa é equivalente ao corpo na figura, e a div interior é equivalente à divindora da figura, provando que o evento de captura é executado primeiro e, em seguida, o evento bolha é executado.
Por que enfatizar clicar na div interior? Como o elemento DOM que realmente desencadeia o evento deve ser da camada interna, e o elemento DOM da camada externa tem a oportunidade de simular e capturar eventos e eventos de bolhas, que podem ser vistos no diagrama esquemático.
E se você registrar o evento de captura e o evento borbulhante no elemento DOM que realmente desencadeia o evento?
A estrutura HTML é a mesma que acima, e o código JS é o seguinte:
A cópia do código é a seguinte:
var btninner = document.getElementById ("testinner");
// Evento borbulhante
btninner.addeventListener ("clique", função (e) {
alerta ("ok");
}, false);
// Catch eventos
btninner.addeventListener ("clique", função (e) {
alerta ("ok1");
}, verdadeiro);
Obviamente, clique na div interior, e o resultado é que ok primeiro aparece, depois ok1. Em teoria, o evento de captura deve ser acionado primeiro, ou seja, o OK1 aparece primeiro, mas aqui é especial, porque registramos um evento no elemento DOM que na verdade desencadeia o evento, o que é equivalente a registrar na div na figura. A partir da figura, podemos ver que o elemento DOM que realmente desencadeia o evento é o ponto final do evento de captura e o ponto de partida do evento de bolhas, para que não haja distinção entre os eventos aqui. Que se registra primeiro, executa qual primeiro. Neste exemplo, o evento Bubble é registrado primeiro, por isso é executado primeiro.
Este princípio se aplica a vários eventos do mesmo tipo. Por exemplo, se 3 eventos de bolha forem registrados de uma só vez, a ordem de execução estará na ordem de registro, primeiro registro e primeiro executar. Por exemplo:
A cópia do código é a seguinte:
var btninner = document.getElementById ("testinner");
btninner.addeventListener ("clique", função (e) {
alerta ("ok");
}, false);
btninner.addeventListener ("clique", função (e) {
alerta ("ok1");
}, false);
btninner.addeventListener ("clique", função (e) {
alerta ("ok2");
}, false);
O resultado está obviamente OK, OK1 e Pop-ups OK2, por sua vez.
Para entender melhor o modelo de eventos, há outro cenário. Se a divisão externa e o interno registrarem o evento de captura ao mesmo tempo, ao clicar na div, o evento de div, o evento externo deverá ser acionado primeiro. O código é o seguinte:
A cópia do código é a seguinte:
var btn = document.getElementById ("teste");
var btninner = document.getElementById ("testinner");
btninner.addeventListener ("clique", função (e) {
alerta ("ok");
}, verdadeiro);
btn.addeventListener ("clique", função (e) {
alerta ("ok1");
}, verdadeiro);
O resultado é que o OK1 aparece primeiro.
Se a divisão externa e a div interior forem eventos de bolhas registradas, ao clicar na div, o evento interno da Div deverá ser executado primeiro e o princípio é o mesmo.
Os leitores cuidadosos descobrirão que, para o caso de Nesting Div, se você clicar na div, a divisão externa também desencadeará um evento, o que parece ser um problema!
O clique é claramente a div interior, mas o evento Div externo também é acionado, o que é realmente um problema.
De fato, quando o evento for acionado, um objeto de evento será passado por padrão. Como mencionado anteriormente, existe um método neste objeto de evento: StopPropagation. Através desse método, as bolhas podem ser evitadas, para que a divisão externa não receba o evento. O código é o seguinte:
A cópia do código é a seguinte:
var btn = document.getElementById ("teste");
var btninner = document.getElementById ("testinner");
btn.addeventListener ("clique", função (e) {
alerta ("ok1");
}, false);
btninner.addeventListener ("clique", função (e) {
// Pare de bolhas
E.StopPropagation ();
alerta ("ok");
}, false);
Finalmente, tenho que falar sobre como resolver o incidente. Sintaxe sem intercorrências: btn.removeEventListener ("Nome do evento", "retorno de chamada do evento", "Capture/Bubble");
É o mesmo que os parâmetros do evento de ligação, conforme descrito em detalhes:
・ O nome do evento significa cancelar o evento.
・ O retorno de chamada do evento é uma função, que deve ser a mesma da função que registra o evento.
・ Tipo de evento, valor booleano, isso deve ser consistente com o tipo quando o evento é registrado.
Em outras palavras, nome, retorno de chamada e tipo, juntos decidem qual evento cancelar, é indispensável. Por exemplo:
A cópia do código é a seguinte:
var btn = document.getElementById ("teste");
// armazenando o retorno de chamada em uma variável
var fn = function (e) {
alerta ("ok");
};
//Vinculativo
btn.addeventListener ("clique", fn, false);
//Remoção
btn.removeEventListener ("clique", fn, false);
Para que o evento registrado seja cancelado, a função de retorno de chamada deve ser salva, caso contrário, não pode ser cancelada.
DOM0 misto e DOM2
As coisas já estão muito confusas, e isso é um uso misto, o que faz as pessoas viverem. . .
Não tenha medo, não há problema em usá -lo de maneira mista. O modelo DOM0 e o modelo DOM2 seguem suas próprias regras e não se afetam.
No geral, não há mais nada se for registrado primeiro e executado primeiro.
PostScript
Neste ponto, o evento JS nativo foi quase feito. Xiaocai só sabe disso. Os leitores podem adicionar outros pontos de conhecimento.
Em aplicações reais, especialistas reais não registrarão estupidamente tantos eventos. De um modo geral, você só precisa registrar um evento no elemento DOM mais externo e, em seguida, usar o mecanismo de captura e bolha para encontrar o elemento DOM que realmente desencadeia o evento e, finalmente, chama o retorno de chamada com base nas informações fornecidas pelo elemento DOM que desencadeia o evento.
Em outras palavras, os especialistas gerenciarão os eventos sem depender de navegadores para gerenciá -los, o que pode melhorar a eficiência e garantir a compatibilidade. Não é isso que o jQuery faz?
Ok, o tutorial termina aqui, espero que seja útil para os leitores!