Este artigo descreve o uso de adicionar e excluir a escuta no JavaScript. Compartilhe para sua referência. A análise específica é a seguinte:
A escuta de eventos no JS é usar o AddEventListener para vincular um evento. Esse uso é muito comum e simples no jQuery, mas é mais complicado no JS nativo. Aqui, organizamos testes e exemplos de vários métodos de evento AddEventListener para sua referência e aprendizado.
Quando eu trabalhava como jogador há dois dias, encontrei alguns problemas para excluir o monitor e não pude ser excluído. Depois de olhar para ele, descobri que os parâmetros precisam ser totalmente correspondidos. O que significa ser completamente correspondido? Em outras palavras:
A cópia de código é a seguinte: $ ('. Video') [0] .AddeventListener ('timeUpdate', CurrentTimeHandler, true);
Por exemplo, três parâmetros precisam ser aprovados nesta frase para que ela possa ser excluída. Por que é necessário? Sim, a parte dolorosa está aqui:
Ao adicionar e remover, o terceiro parâmetro pode ser ignorado, mas sua situação padrão é diferente no momento! !
Geralmente addEventListener é falso ...
1. Adicione a escuta de evento personalizado
A cópia do código é a seguinte: var para eventHandlesCounter = 1; // calcule o número de escuta de evento adicionado, 0 é usado como o bit reservado
função addEvent (obj, evt, fn) {
if (! fn .__ eventId) {fn .__ eventId = eventHandlesCounter ++;}
if (! obj .__Handles) {obj .__ EventHandles = []; }
if (! obj .__ EventHandles [evt]) {
obj .__ EventHandles [evt] = [];
if (obj ["on"+evt] a funçãoof) {
obj .__ EventHandles [evt] [0] = obj ["on"+evt];
obj ["on"+evt] = handlevents;
}
}
obj .__Handles para eventos [evt] [fn .__ eventId] = fn;
function handlevents () {
var fns = obj .__Handles para eventos [EVT];
for (var i = 0; i <fns.length; i ++)
fns [i] .call (this);
}
}
2. Personalize a escuta do Evento Excluir
A cópia do código é a seguinte: função Delevent (Obj, Evt, FN) {
if (! obj .__ Eventhandles ||! obj .__ Eventhandles [evt] ||! fn .__ eventId) {
retornar falso;
}
if (obj .__ EventHandles [evt] [fn .__ eventId] == fn) {
excluir obj .__ Eventhandles [EVT] [fn .__ eventId];
}
}
3. Corrija o método acima
A cópia de código é a seguinte: função addEvent (obj, evt, fn, usecapture) {
if (obj.addeventlistener) {// preferia usar o registro de eventos W3C
obj.addeventListener (evt, fn, !! usaCapture);
}outro{
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.exceventHandles;
}
}
}
addEvent .__ EventHandlesCounter = 1;
addEvent.exceventHandles = function (evt) {
if (! this .__ EventHandles) {retorna true;}
EVT = EVT || Window.Event;
var fns = this .__ EventHandles [evt.type];
for (var i = 0; i <fns.length; i ++) {
if (fns [i] instanceof function) {
fns [i] .call (this);
}
}
};
função DeLevent (OBJ, EVT, FN, USECAPTURA) {
if (obj.removeEventListener) {// remove o manipulador de eventos primeiro usando o método W3C
obj.removeEventListener (EVT, fn, !! usaCapture);
}outro {
if (obj .__ Eventhandles) {
var fns = obj .__Handles para eventos [EVT];
if (fns) {exclua fns [fn .__ eventId];}
}
}
4. Padronize objetos de evento
A cópia do código é a seguinte: função 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 = (new date ()). gettime ();
}
retornar EVT;
}
FixEvent.PreventDefault = function () {this.returnValue = false;}
FixEvent.stopPropagation = function () {this.cancelbubble = true;};
A função FixEvent não é executada separadamente, ela deve ter um parâmetro de objeto de evento e é executado apenas quando o evento ocorre! A melhor maneira é integrá -lo aos manipuladores executivos da função addEvent.
Copie o código da seguinte
if (! this .__ EventHandles) {retorna true;}
evt = fixEvent (evt || window.event); // padronize aqui
var fns = this .__ EventHandles [evt.type];
for (var i = 0; i <fns.length; i ++) {
if (fns [i] instanceof function) {
fns [i] .call (this, evt); // e use -o como o primeiro parâmetro da função do manipulador de eventos
// Dessa forma, você pode usar um método unificado para acessar o objeto de evento na função Handler de eventos}}};
O acima é escrito por um mestre, e a seguir estão alguns exemplos de eventos de monitoramento reais
Copie o código da seguinte forma: <!
<html>
<head>
<title> test6.html </title>
<script type = "text/javascript">
function test () {
window.alert ("Você votou uma vez");
document.getElementById ("1"). Detachevent ("OnClick", teste);
}
</script>
</head>
<Body>
<input type = "button" value = "vote" id = "1"/>
<script type = "text/javascript">
document.getElementById ("1").
</script>
</body>
</html>
Aqui, document.getElementById ("1"). é usado para ligação dinâmica de eventos e o código de cópia é usado da seguinte forma:
Document.getElementById ("1"). Destachevent ("OnClick", teste) cancela o tempo dinamicamente, para que este evento possa ser correspondente apenas uma vez e nenhum efeito será produzido ao clicar neste botão na próxima vez.
Em seguida, outra demonstração de um evento de teclado que é monitorado oportuno para determinar se a entrada é um número. Se não for um número, será solicitado dinamicamente e rejeitará sua entrada.
Copie o código da seguinte forma: <!
<html>
<head>
<title> test7.html </title>
<script type = "text/javascript">
Teste de função (evento) {
// Toda vez que o usuário pressiona uma tecla, ele determinará se é um número
if (event.keycode <48 || event.keycode> 57) {
window.alert ("você está entrando não um número");
retornar falso;
}
}
</script>
</head>
<Body>
<input type = "text" onkeypress = "retorna teste (evento);" /> Por favor, digite um número
</body>
</html>
O evento aqui é um objeto de evento, que pode retornar muitas informações. Consulte os documentos relevantes para obter detalhes.
Suplemento: Compatibilidade no monitoramento de eventos
1. O IE usa o método AnextEvent/Destachevent para adicionar e excluir ouvintes de eventos; O W3C usa o método AddEventListener/RemoneventListener.
2. O IE usa o método de nomeação Onevent para seus eventos, enquanto o W3C é o método de nomeação para o evento.
3. O ouvinte do evento do IE usa um objeto de evento global, enquanto o W3C passa o objeto de evento como um parâmetro para o ouvinte.
4. Para evitar desencadear o comportamento do evento padrão, a abordagem do IE é exigir que os programadores defina o valor da propriedade ReturnValue no objeto Evento como false, enquanto a abordagem do W3C é executar o método DeventDefault.
5. O IE não fornece suporte para a fase de captura de eventos.
6. Para interromper a entrega do evento, a abordagem do IE é definir o objeto CancelBubble do evento como True, enquanto a abordagem do W3C é definir o método de propagação de execução.
7. O IE chama o ouvinte do evento como uma função independente, enquanto no W3C é chamado de método de objeto. Isso significa que, no IE, a palavra -chave no evento de evento aponta para não o objeto de ocorrência de eventos, mas um objeto global inútil (objeto de janela).
8. O IE tem problemas de vazamento de memória no uso de ouvintes de eventos. No navegador do IE, se você deseja criar um ouvinte para um elemento e usar esse elemento no ouvinte, o espaço de memória ocupado pelo ouvinte e os nós DOM associados não serão lançados antes que o usuário insira outra página.
Espero que este artigo seja útil para a programação JavaScript de todos.