Os gatilhos do evento podem ser bem compreendidos literalmente e são usados para desencadear eventos, mas alguns amigos que não os usaram podem ser confundidos. Os eventos geralmente são acionados pelas operações reais dos usuários na página? Essa visualização não está completamente correta, porque alguns eventos devem ser implementados por programas, como eventos personalizados, e alguns eventos personalizados da estrutura do Ajax da JQuery devem ser implementados por gatilhos de eventos. Obviamente, em alguns casos especiais, é mais conveniente usar gatilhos de eventos para acionar eventos do que desencadear eventos pelas operações reais do usuário.
O navegador possui métodos nativos para apoiar a implementação de gatilhos de eventos, mas há grandes diferenças na compatibilidade. Esse problema de compatibilidade é completamente esperado. O IE possui seus próprios métodos e outros navegadores padrão também têm um conjunto de métodos. Sem mencionar quais métodos são bons ou ruins, para desenvolvedores da Web, é uma tortura para os desenvolvedores desenvolverem vários métodos. O IE suporta o método FireEvent para implementar o acionamento de eventos, os navegadores padrão suportam o DispatchEvent para implementar o acionamento de eventos e ambos suportam o IE9. A seguir, o código -fonte do prototype.js (na verdade eu o copiei do blog de Situ Zhengmei):
A cópia do código é a seguinte:
var firevent = function (elemento, evento) {
if (document.createeventObject) {
// O navegador do IE suporta o método do FireEvent
var evt = document.createEventObject ();
Return Element.FireEvent ('On'+Evento, EVT)
}
outro{
// Outros navegadores padrão usam o método DispatchEvent
var evt = document.createevent ('htmlevents');
// initevent aceita 3 parâmetros:
// tipo de evento, seja borbulhando, seja bloqueando o comportamento padrão do navegador
evt.initevent (evento, verdadeiro, verdadeiro);
return! element.dispatchEvent (EVT);
}
};
O método acima é compatível com os principais navegadores para implementar a função dos gatilhos de eventos. No entanto, para alguns sistemas de processamento de eventos encapsulados, como o módulo de evento do jQuery, não é tão simples e só pode ser implementado por meio da simulação. Escrevi um sistema de processamento de eventos muito simples antes e encontrei recentemente a necessidade de eventos personalizados, então simulei um gatilho de evento com base no sistema de eventos anterior, e o código é o seguinte:
A cópia do código é a seguinte:
/**
* Trigger de eventos
* @param {objeto} dom elemento
* @param {string / objeto} tipo de evento / objeto de evento
* @param {Array} parâmetros adicionais passados para a função de manipulador de eventos
* @param {boolean} está borbulhando
*/
Trigger: function (elem, evento, dados, istoppropagation) {
var tipo = event.type || evento,
// elemento pai bolha, todo o caminho para documentar, janela
pai = elem.parentnode ||
Elem.wnerdocument ||
elem === elem.ownerdocument && win,
EventHandler = $ .Data (elem, tipo + 'manipulador');
isStopPropagation = typeof Data === 'boolean'?
Dados: (isStopPropagation || false);
dados = dados && isarray (dados)? dados : [];
// Crie um objeto de evento personalizado
evento = tipoof evento === 'objeto'?
Evento: {
Tipo: Tipo,
PreventDefault: Noop,
StopPropagation: function () {
isStopPropagation = true;
}
};
event.target = elem;
data.unshift (evento);
if (EventHandler) {
EventHandler.Call (Elem, Data);
}
// se chama recursivamente para simular bolhas
if (pai &&! isStopPropagation) {
data.shift ();
this.Trigger (pai, evento, dados);
}
}
O princípio da simulação não é difícil. Ligue uma função de manuseio de eventos a um determinado elemento. Se houver uma operação real de acionar um evento, a função de manipulação de eventos correspondente será executada. Portanto, para alcançar a função do gatilho do evento, basta obter a função de manuseio de eventos correspondente e executá -la. Este é o mais básico.
Quando o evento real ocorre, o navegador gerará um objeto de evento, que contém alguns atributos e informações quando o evento ocorre. Se não houver um evento real, não existe um objeto de evento, portanto, o código acima também cria um objeto de evento para satisfazer as funções mais básicas.
Há também eventos que bolhas. Se não houver eventos reais, naturalmente não haverá comportamento de bolha. Então, se você deseja simular a função da bolha, procure constantemente o elemento pai e verifique se o mesmo tipo de evento está ligado até o documento e a janela. Se a estrutura for complexa, estimou -se que o desempenho desse método de chamada recursiva não seja muito bom.
Finalmente, existe o comportamento padrão do navegador. Eu acho que é bastante problemático simular isso, tão problemático que não sei como implementá -lo. Por exemplo, o salto padrão da tag A. Testei o gatilho do jQuery, mas não foi implementado, mas alguns outros comportamentos parecem ter sido introduzidos no manual da API. Afinal, essa função não é muito importante, e ainda não fiz muita pesquisa aprofundada.