Este artículo describe el uso de agregar y eliminar la escucha en JavaScript. Compártelo para su referencia. El análisis específico es el siguiente:
La escucha de eventos en JS es usar AddEventListener para unir un evento. Este uso es muy común y simple en jQuery, pero es más complicado en JS nativo. Aquí organizamos pruebas y ejemplos de varios métodos de evento AddEventListener para su referencia y aprendizaje.
Cuando trabajaba como jugador hace dos días, encontré algunos problemas para eliminar el monitor y no podía ser eliminado. Después de mirarlo, descubrí que los parámetros deben corresponder por completo. ¿Qué significa ser completamente correspondido? En otras palabras:
La copia del código es la siguiente: $ ('.
Por ejemplo, se deben pasar tres parámetros en esta oración para que pueda eliminarse. ¿Por qué es necesario? Sí, la parte dolorosa está aquí:
Al agregar y eliminar, el tercer parámetro se puede ignorar, ¡pero su situación predeterminada es diferente en este momento! !
Por lo general, addEventListener es falso ...
1. Agregue la escucha de evento personalizado
La copia del código es la siguiente: var EventHandlesCounter = 1; // Calcule el número de escucha de eventos agregados, 0 se usa como bit reservado
función addEvent (obj, evt, fn) {
if (! fn .__ eventId) {fn .__ eventId = eventHandlesCounter ++;}
if (! obj .__ eventHandles) {obj .__ eventHandles = []; }
if (! obj .__ eventHandles [evt]) {
obj .__ eventHandles [evt] = [];
if (obj ["on"+evt] instanciaf función) {
obj .__ EventHandles [evt] [0] = obj ["on"+evt];
obj ["on"+evt] = maneLeEvents;
}
}
obj .__ EventHandles [evt] [fn .__ eventId] = fn;
función handleEvents () {
var fns = obj .__ EventHandles [EVT];
para (var i = 0; i <fns.length; i ++)
fns [i] .call (esto);
}
}
2. Personalice el evento de escucha de Delete
La copia del código es la siguiente: function delevent (obj, evt, fn) {
if (! Obj .__ EventHandles ||! Obj .__ EventHandles [evt] ||
devolver falso;
}
if (obj .__ eventHandles [evt] [fn .__ eventId] == fn) {
eliminar obj .__ eventHandles [evt] [fn .__ eventId];
}
}
3. Corrija el método anterior
La copia del código es la siguiente: función addEvent (obj, evt, fn, useCapture) {
if (obj.addeventListener) {// prefería usar el registro de eventos W3C
obj.addeventListener (evt, fn, !! useCapture);
}demás{
if (! fn .__ eventId) {fn .__ eventId = addEvent .__ eventHandlescounter ++;}
if (! obj .__ eventHandles) {obj .__ eventHandles = [];}
if (! obj .__ eventHandles [evt]) {
obj .__ eventHandles [evt] = [];
if (obj ["on"+evt]) {
(obj .__ eventHandles [evtype] [0] = obj ["on"+evtype]) .__ eventId = 0;
}
obj ["on"+evtype] = addEvent.execEventHandles;
}
}
}
addEvent .__ EventHandlesCounter = 1;
addEvent.execEventHandles = function (evt) {
if (! this .__ EventHandles) {return true;}
EVT = EVT || Window.event;
var fns = this .__ eventHandles [evt.type];
para (var i = 0; i <fns.length; i ++) {
if (fns [i] instanciaf función) {
fns [i] .call (esto);
}
}
};
función delevent (obj, evt, fn, useCapture) {
if (obj.removeEventListener) {// Eliminar el controlador de eventos primero usando el método W3C
obj.removeEventListener (evt, fn, !! useCapture);
}demás {
if (obj .__ eventHandles) {
var fns = obj .__ EventHandles [EVT];
if (fns) {eliminar fns [fn .__ eventId];}
}
}
4. Estandarizar objetos de evento
La copia del código es la siguiente: función fixEvent (evt) {
if (! evt.target) {
evt.target = evt.srcelement;
evt.preventDefault = FixEvent.PreventDefault;
evt.stoppropagation = fixEvent.stoppropagation;
if (evt.type == "mouseover") {
evt.relatedTarget = evt.FromElement;
} else if (evt.type == "mouseout") {
evt.relatedTarget = evt.toelement;
}
evt.charcode = (evt.type == "KeyPress")? Evt.KeyCode: 0;
evt.eventPhase = 2;
evt.timestamp = (nueva fecha ()). getTime ();
}
devolver EVT;
}
fixEvent.preventDefault = function () {this.returnValue = false;}
fixEvent.stopPropagation = function () {this.cancelBubble = true;};
La función FixEvent no se ejecuta por separado, debe tener un parámetro de objeto de evento y se ejecuta solo cuando ocurre el evento. La mejor manera es integrarlo en los execeventhandles de la función AddEvent.
Copie el código de la siguiente manera: addEvent.execEventHandles = function (evt) {// Transize todas las funciones de manejo de eventos y ejecute
if (! this .__ EventHandles) {return true;}
evt = fixEvent (evt || window.event); // estandarizarlo aquí
var fns = this .__ eventHandles [evt.type];
para (var i = 0; i <fns.length; i ++) {
if (fns [i] instanciaf función) {
fns [i] .call (this, evt); // y úselo como el primer parámetro de la función del controlador de eventos
// De esta manera, puede usar un método unificado para acceder al objeto de eventos dentro de la función del controlador de eventos}}};
Lo anterior está escrito por un maestro, y los siguientes son algunos ejemplos de eventos de monitoreo reales.
Copie el código de la siguiente manera: <
<html>
<Evista>
<title> test6.html </title>
<script type = "text/javaScript">
función test () {
Window.alert ("Usted votó una vez");
document.getElementById ("1"). DETACHEVENT ("OnClick", Test);
}
</script>
</ablo>
<Body>
<input type = "button" value = "voting" id = "1"/>
<script type = "text/javaScript">
document.getElementById ("1"). AttachEvent ("onClick", prueba);
</script>
</body>
</html>
Aquí, document.getElementById ("1"). AttachEvent ("OnClick", Test); se usa para la unión de eventos dinámicos, y el código de copia se usa de la siguiente manera:
document.getElementById ("1"). DETACHEVENT ("OnClick", Test) cancela dinámicamente el tiempo, para que este evento solo pueda ser correspondiente una vez, y no se producirá ningún efecto al hacer clic en este botón la próxima vez.
A continuación, otra demostración de un evento de teclado que se monitorea oportunamente para determinar si la entrada es un número. Si no es un número, se solicitará dinámicamente y luego rechace su entrada.
Copie el código de la siguiente manera: <
<html>
<Evista>
<title> test7.html </title>
<script type = "text/javaScript">
prueba de función (evento) {
// Cada vez que el usuario presiona una tecla, determinará si es un número
if (event.keycode <48 || event.keycode> 57) {
Window.alert ("No estás entrando en un número");
devolver falso;
}
}
</script>
</ablo>
<Body>
<input type = "text" onKeyPress = "Test de retorno (evento);" /> Ingrese un número
</body>
</html>
El evento aquí es un objeto de evento, que puede devolver mucha información. Consulte los documentos relevantes para más detalles.
Suplemento: compatibilidad en el monitoreo de eventos
1. IE utiliza el método adjunte de eventos/despoales para agregar y eliminar oyentes de eventos; W3C utiliza el método AddEventListener/RemoLEventListener.
2. IE utiliza el método de nomenclatura de OneVent para sus eventos, mientras que W3C es el método de nomenclatura para el evento.
3. El IE Event Listener usa un objeto de evento global, mientras que W3C pasa el objeto de evento como un parámetro para el oyente.
4. Para evitar activar el comportamiento de evento predeterminado, el enfoque de IE es exigir a los programadores que establezcan el valor de la propiedad de retorno en el objeto de evento a falso, mientras que el enfoque de W3C es ejecutar el método PreventDefault.
5. IE no brinda soporte para la fase de captura de eventos.
6. Para detener la entrega del evento, el enfoque de IE es establecer el CancelBubble del objeto de evento a True, mientras que el enfoque de W3C es establecer el método de ejecución de StopPropagation.
7. IE llama al oyente del evento como una función independiente, mientras que en W3C se llama como un método de objeto. Esto significa que en IE, esta palabra clave en el evento del oyente apunta no al objeto de ocurrencia del evento sino un objeto global inútil (objeto de ventana).
8. IE tiene problemas de fuga de memoria al usar oyentes de eventos. En el navegador IE, si desea crear un oyente de eventos para un elemento y usar ese elemento en el oyente, el espacio de memoria ocupado por el oyente y los nodos DOM asociados no se lanzarán antes de que el usuario ingrese a otra página.
Espero que este artículo sea útil para la programación de JavaScript de todos.