Este artículo describe el uso de eventos personalizados en JavaScript. Compártelo para su referencia. El análisis específico es el siguiente:
En el desarrollo del front-end web, muchas personas pueden no usar eventos personalizados JS, pero si está haciendo un proyecto relativamente grande, especialmente cuando varias personas se desarrollan juntas, los eventos personalizados son muy importantes. Entonces, ¿cuáles son los eventos personalizados en JS? Primero veamos un ejemplo:
Desarrollador frontal A encapsula una función:
Copie el código de la siguiente manera: Función Move () {
alerta (a); // Esto representa el código N-Line
}
Después de un tiempo, el desarrollador B front-end enriquecerá esta función en función de A, por lo que escribirá así:
Copie el código de la siguiente manera: Función Move () {
alerta (a); // Esto representa el código N-Line
alerta (b); // Esto representa n líneas de código
}
¿Has descubierto el problema? B debe prestar atención a los problemas de nombres y conflictos con variables, funciones, etc. Con A. Después de un tiempo, el desarrollador de front-end también debe enriquecer esta función, así que:
Copie el código de la siguiente manera: Función Move () {
alerta (a); // Esto representa el código N-Line
alerta (b); // Esto representa n líneas de código
alerta (c); // Esto representa n líneas de código
}
Será una locura en este momento, y estoy seguro de que no será fácil para C escribir el código. La solución a este problema es personalizar el evento, sabemos que un elemento puede agregar el mismo evento sin afectarse entre sí, como:
La copia del código es la siguiente: Window.adDeventListener ('Click', function () {
alerta (1);
} ,FALSO);
Window.adDeventListener ('Click', function () {
alerta (2);
} ,FALSO);
Al hacer clic en la página, aparecerán 1 y 2, por lo que podemos usar este método para definir nuestra función:
La copia del código es la siguiente: Window.adDeventListener ('Move', function () {
alerta (3);
} ,FALSO);
Window.adDeventListener ('Move', function () {
alerta (4);
} ,FALSO);
De esta manera, cuando ejecutamos Move ();, 3 y 4 aparecerán. Aquí, Move es un evento personalizado, en realidad es una función
Veamos cómo pasar los parámetros a los controladores de eventos:
Copie el código de la siguiente manera: // Encapsula la función con parámetros en una función sin parámetros
function createFunction (obj, strfunc) {
var args = []; // Definir args para almacenar parámetros pasados a los manejadores de eventos
if (! obj) obj = ventana; // Si es una función global, obj = ventana;
// Obtener los parámetros al controlador de eventos
para (var i = 2; i <arguments.length; i ++) args.push (argumentos [i]);
// Use el controlador de llamadas de eventos con una función sin parámetros
Función de retorno () {
obj [strfunc] .Apply (obj, args); // pasar el parámetro al controlador de eventos especificado
}
}
función class1 () {
}
class1.prototype = {
show: function () {
this.onshow ();
},
Onshow: function () {}
}
función objonshow (nombre de usuario) {
alerta ("hola" + nombre de usuario);
}
función test () {
var obj = new class1 ();
var userName = "test";
obj.onshow = createFunction (nulo, "objonshow", nombre de usuario);
obj.show ();
}
"Debido a que el mecanismo de eventos solo pasa el nombre de una función sin ninguna información de parámetros, es imposible pasar los parámetros". Esta es una historia posterior. "Para resolver este problema, puede considerar desde la idea opuesta, no considerar cómo pasar los parámetros, pero considere cómo construir un controlador de eventos sin parámetros. El programa se crea en función de un controlador de eventos con parámetros y es una encapsulación externa". El "programa" aquí es la función CreateFunction, que usa inteligentemente la función Aplicar para encapsular la función con los parámetros en una función sin parámetros. Finalmente, echemos un vistazo a cómo implementar múltiples vinculaciones para eventos personalizados:
Copie el código de la siguiente manera: // para habilitar eventos personalizados para admitir múltiples enlaces
// Encapsula una función con parámetros en una función sin parámetros
function createFunction (obj, strfunc) {
var args = []; // Definir args para almacenar parámetros pasados a los manejadores de eventos
if (! obj) obj = ventana; // Si es una función global, obj = ventana;
// Obtener los parámetros al controlador de eventos
para (var i = 2; i <arguments.length; i ++) args.push (argumentos [i]);
// Use el controlador de llamadas de eventos con una función sin parámetros
Función de retorno () {
obj [strfunc] .Apply (obj, args); // pasar el parámetro al controlador de eventos especificado
}
}
función class1 () {
}
class1.prototype = {
show: function () {
if (this.onshow) {
para (var i = 0; i <this.onshow.length; i ++) {
this.onshow [i] ();
}
}
},
AttachOnshow: function (_eHandler) {
if (! this.onshow) {this.onshow = []; }
this.onshow.push (_eHandler);
}
}
función objonshow (nombre de usuario) {
alerta ("hola" + nombre de usuario);
}
función objonshow2 (testName) {
alerta ("Show:" + testName);
}
función test () {
var obj = new class1 ();
var userName = "tu nombre";
obj.attachonshow (createFunction (nulo, "objonshow", nombre de usuario));
obj.attachonshow (createFunction (nulo, "objonshow2", "mensaje de prueba"));
obj.show ();
}
Vemos que la idea básica de la implementación del método adjunto es presionar la matriz. De hecho, también podemos eliminar la función del controlador de eventos después de ejecutar el evento e implementarla por separado a continuación:
Copie el código de la siguiente manera: // Encapsula la función con parámetros en una función sin parámetros
function createFunction (obj, strfunc) {
var args = []; // Definir args para almacenar parámetros pasados a los manejadores de eventos
if (! obj) obj = ventana; // Si es una función global, obj = ventana;
// Obtener los parámetros al controlador de eventos
para (var i = 2; i <arguments.length; i ++) args.push (argumentos [i]);
// Use el controlador de llamadas de eventos con una función sin parámetros
Función de retorno () {
obj [strfunc] .Apply (obj, args); // pasar el parámetro al controlador de eventos especificado
}
}
función class1 () {
}
class1.prototype = {
show: function () {
if (this.onshow) {
para (var i = 0; i <this.onshow.length; i ++) {
this.onshow [i] ();
}
}
},
adjunteShow: function (_eHandler) {// evento adicional
if (! this.onshow) {this.onshow = []; }
this.onshow.push (_eHandler);
},
Detachonshow: function (_eHandler) {// eliminar el evento
if (! this.onshow) {this.onshow = []; }
this.onshow.pop (_eHandler);
}
}
función objonshow (nombre de usuario) {
alerta ("hola" + nombre de usuario);
}
función objonshow2 (testName) {
alerta ("Show:" + testName);
}
función test () {
var obj = new class1 ();
var userName = "tu nombre";
obj.attachonshow (createFunction (nulo, "objonshow", nombre de usuario));
obj.attachonshow (createFunction (nulo, "objonshow2", "mensaje de prueba"));
obj.show ();
obj.detachonshow (createFunction (nulo, "objonshow", nombre de usuario));
obj.show (); // Eliminar uno y mostrar el restante
obj.detachonshow (createFunction (nulo, "objonshow2", "mensaje de prueba"));
obj.show (); // Ambos se eliminan y ninguno se muestran
}
Espero que este artículo sea útil para la programación de JavaScript de todos.