Podemos personalizar eventos para lograr un desarrollo más flexible. Los eventos pueden ser una herramienta muy poderosa cuando se usan correctamente. El desarrollo basado en eventos tiene muchas ventajas (introducidas más adelante).
Las funciones con eventos personalizados son Event, Customevent y DispatchEvent.
Personalice los eventos directamente, utilizando el constructor de eventos:
var event = new Event ('build'); // Escuchar el evento.elem.addeventListener ('build', function (e) {...}, falso); // despachar el evento.elem.dispeChevent (evento);CustomEvent puede crear un evento más personalizado, y también puede ir acompañado de algunos datos. El uso específico es el siguiente:
var myEvent = new CustomEvent (EventName, Opciones);
Donde pueden estar las opciones:
{Detalle: {...}, Bubbles: True, Cancelable: False}El detalle puede almacenar información de inicialización y se puede llamar cuando se activan. Otras propiedades son definir si el evento tiene burbujas y otras funciones.
El navegador activará los eventos incorporados de acuerdo con ciertas operaciones, y los eventos personalizados deberán activarse manualmente. La función DispathEvent se utiliza para activar un evento:
elemento.dispatchevent (customevent);
El código anterior indica que el evento CustomEvent se activa en el elemento. Juntos, úsalo:
// Agregue un evento apropiado oyente de Evento
Use eventos personalizados para prestar atención a los problemas de compatibilidad, pero usar jQuery es mucho más simple:
// BIND Evento personalizado $ (Element) .on ('myCustOMEVEVE', function () {}); // activar evento $ (elemento) .Trigger ('myCustomEvent'); Además, puede aprobar más información de parámetros al activar un evento personalizado: $ ("p") .on ("myCustomEvent", function (event, myname) {$ (this) .Text (myname + ", hola!");}); $ ("Botón") .Click (function () {$ ("p") .trigger ("mycustomevent", ["John");});});}Los eventos personalizados de JavaScript son diferentes de los eventos autocustomizados, como hacer clic y enviar. Antes de describir los beneficios de los eventos personalizados, echemos un vistazo a un ejemplo de eventos personalizados:
<div id = "testbox"> </div> // create event var evt = document.createEvent ('event'); // define el tipo de evento evt.initevent ('customEvent', true, true); // escucha a event var obj = document.getElementByid ('testbox'); obj.addeventlistener ('customeMeVent', function () {console activado ');}, falso);Para efectos específicos, puede verificar la demostración. Ingrese obj.dispatchevent (EVT) en la consola. Puede ver que el "evento de customeved de salida activado" en la consola, lo que indica que el evento personalizado se activó con éxito.
En este proceso, el método CreateEvent crea un evento vacío EVT, luego utiliza el método inITEVEVEVE para definir el tipo de evento como el evento personalizado acordado y luego escucha el elemento correspondiente. Luego, use DispathEvent para activar el evento.
Así es, el mecanismo de los eventos personalizados es como un evento normal: escuchar eventos, escribir operaciones de devolución de llamada y ejecutar devoluciones de llamada después de activar eventos. Pero la diferencia es que los eventos personalizados están completamente controlados por nosotros, lo que significa que se implementa un desacoplamiento de JavaScript. Podemos controlar de manera flexible múltiples operaciones asociadas pero lógicamente complejas utilizando el mecanismo de eventos personalizados.
Por supuesto, es posible que haya adivinado que el código anterior no surta efecto en versiones más bajas de IE. De hecho, CreateEvent () no es compatible con IE8 y por debajo de las versiones de IE, pero está el método privado de fireeVent () de IE, pero desafortunadamente, FireEvent solo admite la activación de eventos estándar. Por lo tanto, solo podemos usar un método especial y simple para activar un evento personalizado.
// El tipo es un evento personalizado, como type = 'customevent', la devolución de llamada es la función de devolución de llamada realmente definida por el desarrollador obj [type] = 0; obj [type] ++; obj.attachevent ('onPropertychange', function (event) {if (event.propertyname == type) {callback.call (obj);}});El principio de este método es en realidad agregar una propiedad personalizada al DOM y escuchar el evento PropertyChange del elemento. Cuando el valor de una determinada propiedad en el DOM cambia, la devolución de llamada de PropertyChange se activará y luego se determina en la devolución de llamada si la propiedad modificada es nuestra propiedad personalizada. Si es así, la devolución de llamada realmente definida por el desarrollador será ejecutada. Esto simula el mecanismo de eventos personalizados.
Para permitir que el mecanismo de los eventos personalizados coopere con la escucha y la activación simulada de los eventos estándar, aquí se proporciona un mecanismo de evento completo. Este mecanismo respalda el monitoreo de eventos estándar y eventos personalizados, y elimina las operaciones de activación de escucha y simuladas. Cabe señalar que para que la lógica del código sea más clara, se acuerda que los eventos personalizados tienen el prefijo de 'personalizado' (por ejemplo: CustomTest, Customalert).
/ *** @Description contiene Evento de escucha de eventos, eliminación y simulación Evento de activación, compatible con las llamadas de la cadena**/ (function (window, undefined) {var ev = window.ev = window. $ = function (element) {return new Ev.fn.init (element);}; // ev.nodeTyTyTyTyType = {element.nodyte 1)? Elemento: Documento; _THAT.Element.AdDeventListener (type, llamado, falso); } var fnev = function (event) {event = event? ! _THAT.Element ['Callback' + Callback]) {_THAT.Element ['Callback' + Callback] = FNEV; return _that; _that.element.removeEventListener (tipo, devolución de llamada, falso); _that.element.detachevent ('onPropertychange', _that.element ['Callback' + Callback]); * @supported para otros*/ _that.Element ['on' + type] = null; if (_that.element.dispatchEvent) {// Crear evento var evt = document.createEvent ('event'); type.indexof ('custom')! = -1) {_that.element [type] ++; Test Case 1 (prueba de evento personalizado) // Caso de prueba 1 (prueba de evento personalizado) // Introducir el mecanismo de eventos // ... // Catch DomVar testbox = document.getElementById ('testbox'); // Callback Función 1Function TriggerEvent () {console.log ('Aprendió un EventConsole personalizado');} // Función de devolución de llamada 2funtion AtggerAin () Event CustomConsole ');} // Encapsulation testbox = $ (testbox); // Binde dos funciones de devolución de llamada al mismo tiempo, admitiendo una llamada de cadena a testbox.add (' CustomConsole ', TriggeVent) .Add (' CustomConsole ', Trigragagain);El código completo está en demostración.
Después de abrir la demostración, llame a testbox.trigger ('customConsole') en la consola para activar el evento personalizado por sí solo. Puede ver que la consola emite dos indicaciones y luego ingrese testbox.remove ('CustomConsole', Triggergain) para eliminar el siguiente oyente. En este momento, use testbox.rigger ('customConsole') para activar el evento personalizado. Puede ver que la consola solo genera un mensaje, es decir, el siguiente oyente se elimina con éxito. Todas las funciones del mecanismo de eventos funcionan normalmente.