Podemos personalizar eventos para obter um desenvolvimento mais flexível. Os eventos podem ser uma ferramenta muito poderosa quando usados corretamente. O desenvolvimento baseado em eventos tem muitas vantagens (introduzidas posteriormente).
As funções com eventos personalizados são eventos, customevent e despacho.
Personalize os eventos diretamente, usando o construtor de eventos:
var evento = new Event ('build'); // Ouça para o evento.Elem.addeventListener ('Build', function (e) {...}, false); // Despache o evento.Elem.DispatchEvent (Event);O Customevent pode criar um evento mais altamente personalizado e também pode ser acompanhado por alguns dados. O uso específico é o seguinte:
var myEvent = new Customevent (EventName, Options);
Onde as opções podem estar:
{detalhe: {...}, bolhas: true, cancelável: false}Os detalhes podem armazenar algumas informações de inicialização e podem ser chamados quando acionados. Outras propriedades são definir se o evento tem bolhas e outras funções.
Os eventos internos serão acionados pelo navegador de acordo com determinadas operações, e os eventos personalizados precisarão ser acionados manualmente. A função DispatchEvent é usada para acionar um evento:
element.dispatchEvent (customevent);
O código acima indica que o evento Customevent é acionado no elemento. Juntos, use -o:
// Adicione um evento apropriado lideRoBJ.addeventListener ("CAT", function (e) {Process (E.Detail)}); // Crie e despache o evento EventVar = new Customevent ("CAT", {"detalhe": {"hazcheeseburger": true}}); obj.dispatch ": {" event);Use eventos personalizados para prestar atenção aos problemas de compatibilidade, mas o uso do jQuery é muito mais simples:
// vinte o evento personalizado $ (elemento) .on ('mycustomevent', function () {}); // evento de gatilho $ (elemento) .trigger ('mycustomevent'); Além disso, você pode passar mais informações de parâmetros ao acionar um evento personalizado: $ ("p") .on ("mycustomevent", function (evento, myname) {$ (this) .text (myname + ", hi lá!");}); $ ("Botão") .Click (function () {$ ("P").Os eventos personalizados do JavaScript são diferentes dos eventos auto-sustentados, como clique e enviar. Antes de descrever os benefícios dos eventos personalizados, vamos dar uma olhada em um exemplo de eventos personalizados:
<div id = "TestBox"> </div> // Crie evento var evt = document.createevent ('event'); // define o tipo de evento evt.initevent ('customevent', true, true); // Ouça o evento var obj = customEnting ', (' TestBox '); acionado ');}, false);Para efeitos específicos, você pode verificar a demonstração. Digite obj.dispatchEvent (EVT) no console. Você pode ver que o "evento de customvent de saída acionado" no console, indicando que o evento personalizado foi acionado com sucesso.
Nesse processo, o método CreateEvent cria um evento vazio EVT e, em seguida, usa o método Initevent para definir o tipo de evento como o evento personalizado acordado e, em seguida, ouve o elemento correspondente. Em seguida, use o DispatchEvent para acionar o evento.
É isso mesmo, o mecanismo de eventos personalizados é como um evento normal - ouvindo eventos, escrever operações de retorno de chamada e executar retornos de chamada após desencadear eventos. Mas a diferença é que os eventos personalizados são completamente controlados por nós, o que significa que uma dissociação de JavaScript é implementada. Podemos controlar flexibilidade múltiplas operações associadas, mas logicamente complexas, usando o mecanismo de eventos personalizados.
Obviamente, você deve ter adivinhado que o código acima não entra em vigor em versões mais baixas do IE. De fato, o createevent () não é suportado no IE8 e abaixo das versões do IE, mas existe o método privado do FireEvent () do IE, mas, infelizmente, o FireEvent suporta apenas o acionamento de eventos padrão. Portanto, podemos usar apenas um método especial e simples para acionar um evento personalizado.
// Tipo é um evento personalizado, como tipo = 'Customevent', o retorno de chamada é a função de retorno de chamada realmente definida pelo desenvolvedor obj [type] = 0; obj [type] ++; obj.attachevent ('onPropertyChange', function (event) {if (event.propertyName == tipo) {callback.call (obj);}});O princípio deste método é realmente adicionar uma propriedade personalizada ao DOM e ouvir o evento PropertyChange do elemento. Quando o valor de uma determinada propriedade no DOM mudar, o retorno de chamada do PropertyChange será acionado e, em seguida, no retorno de chamada é determinado se a propriedade alterada é nossa propriedade personalizada. Nesse caso, o retorno de chamada realmente definido pelo desenvolvedor será executado. Isso simula o mecanismo de eventos personalizados.
Para permitir o mecanismo de eventos personalizados para cooperar com o desencadeamento de escuta e simulado de eventos padrão, um mecanismo de eventos completo é apresentado aqui. Esse mecanismo suporta o monitoramento de eventos padrão e eventos personalizados e remove as operações de escuta e acionamento simulado. Deve -se notar que, para tornar a lógica do código mais clara, é acordado que os eventos personalizados têm o prefixo de 'Custom' (por exemplo: CustomTest, CustomAlert).
/ *** @Description contém escuta de eventos, remoção e acionamento de eventos de simulação, suportando chamadas da cadeia**/ (function (janela, indefinida) {var ev = window.ev = window. 1) elemento: documento; _That.Element.adDeventListener (Tipo, retorno de chamada, false); 0 ! _athat.Element ['retorno de chamada' + retorno de chamada]) {_That.Element ['retorno de chamada' + retorno de chamada] = fnev; Retorne _TE; _athat.Element.RemoveEventListener (Tipo, retorno de chamada, false); _that.Element.detachevent ('onPropertyChange', _That.Element ['retorno de chamada' + retorno de chamada]); / *** @Supported para outros* / _That.Element ['em' + tipo] = null; if (_that.Element.dispatchEvent) {// Crie evento var evt = document.createevent ('evento'); tipo.indexof ('personalizado')! = -1) {_Te Caso de teste 1 (teste de evento personalizado) // Caso de teste 1 (teste de evento personalizado) // Introduce mecanismo de eventos // ... // Catch domvar testbox = document.getElementById ('testbox'); // função de retorno de chamada 1function trigRevent () {console.log ('TRIGERED A CustomAgin CustomConsole');} // CustomConsole ');} // encapsulamento testbox = $ (testbox); // vincula duas funções de retorno de chamada ao mesmo tempo, suporte da cadeia de chamada para testbox.add (' alicerconsole ', trigonsevent) .add (' alfabearconsole ', triggeragain);O código completo está em demonstração.
Depois de abrir a demonstração, ligue para o TestBox.Trigger ('CustomConsole') no console para acionar o evento personalizado por si só. Você pode ver que o console produz duas solicitações e digite o testbox.remove ('alfabetizador', tathergain) para remover o próximo ouvinte. No momento, use o testbox.Trigger ('CustomConsole') para acionar o evento personalizado. Você pode ver que o console gera apenas um prompt, ou seja, o próximo ouvinte é removido com sucesso. Todas as funções do mecanismo de eventos funcionam normalmente.