Este artigo descreve o uso de eventos personalizados em JavaScript. Compartilhe para sua referência. A análise específica é a seguinte:
No desenvolvimento do front-end da Web, muitas pessoas podem não usar eventos personalizados do JS, mas se você estiver fazendo um projeto relativamente grande, especialmente quando várias pessoas se desenvolvem juntas, os eventos personalizados são muito importantes. Então, quais são os eventos personalizados no JS? Vamos primeiro olhar para um exemplo:
O desenvolvedor front-end e encapsula uma função:
Copie o código da seguinte forma: função move () {
alerta (a); // Isso representa o código N-line
}
Depois de um tempo, o desenvolvedor do front-end B enriquecerá essa função com base em A, então ele escreverá assim:
Copie o código da seguinte forma: função move () {
alerta (a); // Isso representa o código N-line
alerta (b); // Isso representa n linhas de código
}
Você descobriu o problema? B deve prestar atenção aos problemas de nomeação e conflito com variáveis, funções etc. com A. Depois de um tempo, o desenvolvedor de front-end C também deve enriquecer essa função, então:
Copie o código da seguinte forma: função move () {
alerta (a); // Isso representa o código N-line
alerta (b); // Isso representa n linhas de código
alerta (c); // Isso representa n linhas de código
}
Será louco neste momento, e tenho certeza de que não será fácil para C escrever o código. A solução para esse problema é personalizar o evento, sabemos que um elemento pode adicionar o mesmo evento sem se afetar, como:
A cópia do código é a seguinte: Window.adDeventListener ('Click', function () {
alerta (1);
}, false);
window.addeventListener ('click', function () {
alerta (2);
}, false);
Ao clicar na página, 1 e 2 aparecerão, para que possamos usar este método para definir nossa função:
A cópia do código é a seguinte: Window.adDeventListener ('move', function () {
alerta (3);
}, false);
window.addeventListener ('move', function () {
alerta (4);
}, false);
Dessa forma, quando executamos move ();, 3 e 4 aparecerão. Aqui, Move é um evento personalizado, na verdade é uma função
Vamos ver como passar os parâmetros para os manipuladores de eventos:
Copie o código da seguinte forma: // encapsula a função com parâmetros em uma função sem parâmetros
função createfunção (obj, strfunc) {
var args = []; // define args para armazenar parâmetros passados para manipuladores de eventos
if (! obj) obj = janela; // Se for uma função global, obj = janela;
// Receba os parâmetros para o manipulador de eventos
para (var i = 2; i <argumentos.Length; i ++) args.push (argumentos [i]);
// Use a chamada do manipulador de eventos com uma função sem parâmetros
Return function () {
obj [strfunc] .Apply (obj, args); // Passe o parâmetro para o manipulador de eventos especificado
}
}
função classe1 () {
}
classe1.prototype = {
SHOW: function () {
this.onsShow ();
},
ONSHOW: function () {}
}
função objonShow (nome de usuário) {
alerta ("Olá", + nome de usuário);
}
function test () {
var obj = new Class1 ();
var usuário nome = "teste";
obj.onsshow = createfunção (null, "objonShow", nome de usuário);
obj.show ();
}
"Como o mecanismo de evento passa apenas o nome de uma função sem nenhuma informação de parâmetro, é impossível passar os parâmetros". Esta é uma história posterior. "Para resolver esse problema, você pode considerar a partir da idéia oposta, não considerando como passar os parâmetros, mas considere como construir um manipulador de eventos sem parâmetros. O programa é criado com base em um manipulador de eventos com parâmetros e é um encapsulamento externo". O "Programa" aqui está a função CreateFunction, que usa inteligentemente a função Aplicar para encapsular a função com os parâmetros em uma função sem parâmetros. Finalmente, vamos dar uma olhada em como implementar multi-ligação para eventos personalizados:
Copie o código da seguinte
// encapsula uma função com parâmetros em uma função sem parâmetros
função createfunção (obj, strfunc) {
var args = []; // define args para armazenar parâmetros passados para manipuladores de eventos
if (! obj) obj = janela; // Se for uma função global, obj = janela;
// Receba os parâmetros para o manipulador de eventos
para (var i = 2; i <argumentos.Length; i ++) args.push (argumentos [i]);
// Use a chamada do manipulador de eventos com uma função sem parâmetros
Return function () {
obj [strfunc] .Apply (obj, args); // Passe o parâmetro para o manipulador de eventos especificado
}
}
função classe1 () {
}
classe1.prototype = {
SHOW: function () {
if (this.onsShow) {
for (var i = 0; i <this.onsshow.length; i ++) {
this.onsShow [i] ();
}
}
},
ATPLETONSHOW: function (_eHandler) {
if (! this.onsShow) {this.onsshow = []; }
this.onsshow.push (_ehandler);
}
}
função objonShow (nome de usuário) {
alerta ("Olá", + nome de usuário);
}
função objonShow2 (testName) {
alerta ("Mostrar:" + testName);
}
function test () {
var obj = new Class1 ();
var usuário nome = "Seu nome";
obj.attachonShow (CreateFunção (null, "objonsshow", nome de usuário));
obj.attachonShow (CreateFunção (null, "objonsshow2", "mensagem de teste"));
obj.show ();
}
Vemos que a idéia básica da implementação do método da ApotenOnshow é pressionar a matriz. De fato, também podemos remover a função de manipulador de eventos após a execução do evento e implementá -la separadamente abaixo:
Copie o código da seguinte forma: // encapsula a função com parâmetros em uma função sem parâmetros
função createfunção (obj, strfunc) {
var args = []; // define args para armazenar parâmetros passados para manipuladores de eventos
if (! obj) obj = janela; // Se for uma função global, obj = janela;
// Receba os parâmetros para o manipulador de eventos
para (var i = 2; i <argumentos.Length; i ++) args.push (argumentos [i]);
// Use a chamada do manipulador de eventos com uma função sem parâmetros
Return function () {
obj [strfunc] .Apply (obj, args); // Passe o parâmetro para o manipulador de eventos especificado
}
}
função classe1 () {
}
classe1.prototype = {
SHOW: function () {
if (this.onsShow) {
for (var i = 0; i <this.onsshow.length; i ++) {
this.onsShow [i] ();
}
}
},
ATCHONSHOW: function (_eHandler) {// Evento adicional
if (! this.onsShow) {this.onsshow = []; }
this.onsshow.push (_ehandler);
},
DetACHONSHOW: function (_eHandler) {// Remova o evento
if (! this.onsShow) {this.onsshow = []; }
this.onsshow.pop (_ehandler);
}
}
função objonShow (nome de usuário) {
alerta ("Olá", + nome de usuário);
}
função objonShow2 (testName) {
alerta ("Mostrar:" + testName);
}
function test () {
var obj = new Class1 ();
var usuário nome = "Seu nome";
obj.attachonShow (CreateFunção (null, "objonsshow", nome de usuário));
obj.attachonShow (CreateFunção (null, "objonsshow2", "mensagem de teste"));
obj.show ();
obj.detachonsshow (CreateFunção (null, "objonsshow", nome de usuário));
obj.show (); // remova um e exiba o restante
obj.detachonsshow (CreateFunção (null, "objonShow2", "Mensagem de teste"));
obj.show (); // ambos são removidos e nenhum é exibido
}
Espero que este artigo seja útil para a programação JavaScript de todos.