Durante o processo de desenvolvimento do front-end, geralmente encontramos o problema de adicionar eventos aos elementos da página. Existem também muitos métodos JS para adicionar eventos, incluindo diretamente adicionados à estrutura da página e alguns métodos de monitoramento de eventos JS. Como cada navegador possui mecanismos diferentes para o monitoramento de eventos de bolhas de eventos, o navegador LE possui apenas bolhas de eventos e nenhum mecanismo de monitoramento de eventos, e a questão da compatibilidade da escuta de eventos é o maior problema:
1. Escreva o método do evento diretamente na estrutura da página
função eventfun () {//console.log(This); } <input type = "button" onclick = "eventfun ()" value = "button"/> // Isso envolve um problema desse escopo. Eventfun também é uma função global aqui. O objeto é [janela do objeto], e isso aponta para a janela.Para resolver esse problema de escopo, você pode usar o método de adicionar variáveis de evento à função global e passar esse objeto como um parâmetro para a função dentro da estrutura da página
<input type = "button" onclick = "eventfun2 (this)" value = "button2"/> função Eventfun2 (EVE) {// aqui o objeto de evento é passado como um parâmetro para o método global Eve.name = "Alex"; window.name = "robin"; console.log (this); // [Janela do objeto] console.log (EVE); // [objeto htmlinputElement] console.log (this.name); // robin console.log (eve.name); // alexvar self = eve; console.log (this.name); // robin console.log (self.name); // Alex Alert (window.name); alerta (self.name); }2. Usar o método de atribuição de valor aos atributos de evento é um método de ligação aos eventos, mas a limitação desse método é que ele só pode vincular um método aos eventos. Se várias ligações estiverem vinculadas, um método prevalecerá.
HtmlelementObject.OnClick = Fucntion () {// Use este método para atribuir valor aos atributos do evento, este ponteiro apontará para o objeto da janela, não o objeto de evento, então esse método é uma referência
// code js fun1 (); fun2 (); fun3 (); console.log (this); // window.object} função doSomething () {// code js} htmlelementObject.OnClick = doSomething; // Use este formulário de atribuição de valor aos atributos do objeto de evento, este ponteiro aponta para o consolo de execução do evento.log (this); // htmelementOnMentOngment3. Propagação de eventos - bolha e captura
O padrão de evento DOM define dois fluxos de eventos, que são significativamente diferentes e podem ter um impacto considerável no seu aplicativo. Esses dois fluxos de eventos são captura e bolha. Como muitas tecnologias da Web, o Netscape e a Microsoft os implementaram de maneira diferente antes de se tornarem padrão. O Netscape optou por implementar fluxos de eventos de captura, enquanto a Microsoft implementou fluxos de eventos de bolhas. Felizmente, o W3C decidiu usar os dois métodos em combinação, e a maioria dos novos navegadores segue esses dois métodos de streaming de eventos.
Por padrão, os eventos usam fluxos de eventos de bolhas e nenhum fluxo de eventos de captura é usado. No entanto, no Firefox e no Safari, você pode especificar explicitamente o uso de fluxos de eventos de captura, passando no parâmetro Usecapture ao registrar o evento e definir esse parâmetro como true.
Fluxo de eventos de bolhas
Quando um evento é acionado em um elemento DOM, por exemplo, o usuário clica no mouse no nó do nome do cliente, o evento seguirá os vários nós pais herdados dos quais o nó borbulha através de toda a hierarquia do Nó DOM até que ele encontre um nó que seja anexado ao processador do tipo de evento. Neste momento, o evento é o evento OnClick. A borbulha dos eventos pode ser encerrada a qualquer momento durante o processo de borbulha. Nos navegadores que cumprem os padrões W3C, você pode chamar o método StopPropagation () no objeto de evento e, no Internet Explorer, você pode definir o atributo cancelbubble do objeto de evento como true. Se o evento não for interrompido, o evento borbulhará através do DOM até atingir a raiz do documento.
Capture o fluxo de eventos
O processamento do evento começa na raiz do nível DOM, e não no elemento de destino que aciona o evento, e o evento é transmitido em sequência de todos os elementos ancestrais do elemento de destino. Nesse processo, os eventos são capturados por vários elementos derivados herdados da raiz do documento para o elemento de destino do evento. Se o ouvinte do evento definir o atributo Usecapture para True quando registrado, poderá ser atribuído a qualquer elemento durante esse período para lidar com o evento; Caso contrário, os eventos serão passados posteriormente para o próximo elemento no caminho do elemento derivado até o elemento de destino. Depois que o evento atingir o elemento de destino, ele borbulhará através do nó DOM.
Método de ligação a eventos modernos
Para a lição anterior, o uso da ligação tradicional de eventos tem muitas desvantagens, como a incapacidade de registrar vários manipuladores de eventos no mesmo evento de um objeto. E os navegadores e o W3C não são sem considerar isso; portanto, nos navegadores modernos, eles têm seus próprios métodos para vincular eventos.
W3C DOM
obj.addeventListener (Evtype, FN, USTYECAPTURA) - O W3C fornece um método para adicionar funções de manuseio de eventos. OBJ é o objeto de adicionar eventos, Evtype é o tipo de evento, sem prefixo, FN é a função de manipulador de eventos, se o USECAPTURA for verdadeiro, a função de manipulador de eventos será executada no estágio de captura, caso contrário, é executada no estágio da bolha
obj.removeEventListener (Evtype, FN, USECAPTURA)-O W3C fornece um método para excluir funções de manuseio de eventos
Microsoft IE Método
Obj.attachevent (Evtype, FN) - O método fornecido pelo IE para adicionar funções de manuseio de eventos. OBJ é o objeto de adicionar eventos, Evtype é o tipo de evento, com prefixo, FN é a função de manipulador de eventos, ou seja, não suporta captura de eventos
Obj.Detachevent (Evtype, FN) - IE fornece um método para excluir a função de manuseio de eventos, Evtype contém no prefixo
Uma maneira de integrar os dois
função addEvent (obj, evtype, fn, usecapture) {if (obj.addeventListener) {obj.addeventListener (Evtype, fn, usecapture); } else {obj.attachevent ("on"+evtype, fn); // ie não suporta captura de eventos} else {obj ["on"+evtype] = fn; // de fato, essa situação não existirá}} função deLevent (obj, Evtype, fn, uCapture) {{se obj.removeEventListener (Evtype, FN, USECAPTURA); } else {obj.detachevent ("on"+evtype, fn); } else {obj ["on"+evtype] = null; }}Há um problema com o método de anexo do IE, que é que, ao usar o AnextEvent, isso aponta para a janela, não o OBJ! Claro, há uma solução para isso!
Mas há outro problema com o método APLETEMEVENT do IE. A mesma função pode ser registrada com o mesmo objeto e o mesmo evento várias vezes. Solução: abandone o método ApptlementEvent do IE! O método AnextEvent no IE não suporta a captura, o que não é muito diferente do registro tradicional de eventos (exceto para vincular vários manipuladores de eventos), e o método APLETEMEVEVENT do IE tem um problema de vazamento de memória!
AddEvent, versão moderna delevent
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> borda-bottom: 1px sólido #efefefef;} < /style> </head> <body> <div id = "outele" style = "preenchimento: 10px; borda: 1px sólido #b2b2b2; background: #efefefefef;"> <input type = "" "onclick =" eventfun () "id =" "" OnClick = "Eventfun2 (this);" id="button2" value="button2" /><br /> <input type="button" id="button3" value="button3" /><br /> <input type="button" id="button4" value="button4" /><br /> <table id="htmlEleTable" style="border:1px solid #b2b2b2; background:#fff;"> <tr id = "1111"> <Td> 111111111111111111111111111111 id = "333333333333333333333333333333333333333 </td> </tr> <tr id="44444"><td>44444444444444444444444444444444444444444444444444444444444444444444444444444444444444 44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444</td></tr> <tr id ID = "555555555555555555555555555555 </td> </tr> </tabela> </div> <script idioma =" javascript "type =" text/javasscript "> functionFun () {// 1. Escreva diretamente o método JS no console da estrutura da página.log (this); // Isso envolve um problema com esse escopo. Eventfun é uma função global, o objeto é a janela e isso aponta para alerta de janela (isto); } função Eventfun2 (Eve) {// Passe aqui o objeto de evento como um parâmetro para o método global Eve.name = "Alex"; // window.name = "robin"; console.log (this); // [Janela do objeto] console.log (EVE); // [objeto htmlinputElement] console.log (this.name); // robin console.log (eve.name); // alex var self = eve; console.log (this.name); // robin console.log (self.name); // Alex Alert (window.name); alerta (self.name); } função eventfun3 () {// 1. Escreva diretamente o método JS no console da estrutura da página.log (this); // Isso envolve um problema desse escopo. Eventfun é uma função global, o objeto é a janela e isso aponta para o Window Console.log (this.id); alerta (isso); alerta (isso); alerta (this.id); // var OutleObj = eventUtil. $ ("Outle"); // removeevent (Outleobj, "Clique", Eventfun3); } /* var eventUtil = {}; EventUtil. $ = Function (id) {return document.getElementById (id); } EventUtil.openmes = eventfun3; EventUtil.adDeventHandle = function (EventTarget, EventType, EventHandle) {// Defina o elemento de objeto, tipo de evento para escuta de eventos, função de evento if (EventTarget.attachevent) {EventTarget.attachevent ("on"+EventType, EventHandle); } else if (EventTarget.adDeventListener) {EventTarget.adDeventListener (EventType, EventHandle, false)} else {EventTarget ["on" + EventType] = null; }}; EventUtil.DeleeventHandle = function (EventTarget, EventType, EventHandle) {// Defina o elemento do objeto, tipo de evento para escuta de eventos, função de evento if (eventTarget.detachevent) {alert ("no"+eventtype); alerta ("on"+EventHandle); EventTarget.Detachevent ("On"+EventType, EventHandle); } else if (EventTarget.RemoveEventListener) {EventTarget.RemoveEventListener (EventType, EventHandle, false)} else {EventTarget ["on" + EventType] = null; }};*/ var eventUtil = {$: function (id) {return document.getElementById (id); }, mas4fun: function () {console.log (this); this.addeventHandle (); }, eventfun3: function () {console.log (this); alerta (isso); DeLevent (OBJ, Evtype, FN, USECAPTURA); }} /*** Use AddEventListener, AnextEvent para função de escuta addEvent (obj, evtype, fn, usecapture) {if (obj.addeventlistener) {obj.addeventListener (Evtype, fn, USECEPTURA); } else if (obj.attachevent) {obj.attachevent ("on"+evtype, function () {fn.call (obj);}); } else {obj ["on"+Evtype] = fn; // Na verdade, essa situação não existirá}} função DeLevent (obj, evtype, fn, usecapture) {if (obj.removeEventListener) {obj.); } else if (obj.detachevent) {obj.detachevent ("on"+evtype, fn); } else {obj ["on"+evtype] = null; }} função addEvent (obj, evtype, fn, usecapture) {if (obj.addeventListener) {// prioridade é dada ao esquema de registro de eventos w3c obj.addeventListener (Evtype, fn, !! usecapture); } else {// Quando o addEventListener não é suportado (ie), pois o IE não suporta a captura ao mesmo tempo, é melhor usar a ligação tradicional de eventos se (! fn .__ eventId) {fn .__ eventId = addEvent .__ EventHandlesCounter ++;} // atribui um idi -l para cada evento. // _ EventHandles O atributo é usado para salvar referências a todos os manipuladores de eventos // classificados por tipo de evento if (! Obj .__ eventhandles [Evtype]) {// Na primeira vez em que um evento é registrado obj .__ EventHandles [Evtype] = {}; if (obj ["on"+Evtype]) {// A função de manuseio de eventos já foi registrada da maneira tradicional antes (obj .__ EventHandles [Evtype] [0] = obj ["em"+Evtype]) .__ EventID = 0; // Adicionar aos 0 bits // e adicione ida ao evento de evento}}}}}}} obj ["on"+evtype] = addEvent.exceventHandles; /Quando ocorre um evento, o ExeCeventHandles atravessa a tabela obj .__ EventHandles [Evtype] e executa a função em ele}}}} addEvent .__ eventHandlesCounter = 1; // contador, 0 bit reservou -o com addEvent.exEventHandles = function (evt) {/{/tranility All All All Todo true;} evt = evt || Window.Event; var fns = this .__ EventHandles [evt.type]; for (var i em fns) {fns [i] .call (this); }}; /* função DeLevent (Obj, Evtype, FN, USECAPTURE) {if (obj.removeEventListener) {// Primeiro use o método W3C para remover a função de manipulador de eventos obj.removeEventListener (Evtype, fn, !! useCapture); } else {if (obj .__ EventHandles) {var fns = obj .__ EventHandles [Evtype]; if (fns) {exclua fns [fn .__ eventId];}}}}} função fixEvent (evt) {// A função FixEvent não é executada separadamente. Ele deve ter um parâmetro de objeto de evento e será executado apenas quando o evento ocorrer! A melhor maneira é integrá -lo aos manipuladores executivos da função addEvent se (! 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; // IE só funciona no estágio da bolha evt.timestamp = (new Date ()). gettime (); // Defina -o apenas para a hora atual} retornar EVT; } fixEvent.preventDefault = function () {this.returnValue = false; // Isso aqui aponta para um determinado objeto de evento, não fixEvent}; fixevent.stopPropagation = function () {this.cancelbubble = true; };*///console.log(eventutil.$("button3"); Use o método de atribuir valores ao atributo de evento do objeto para realizar a escuta de eventos //eventutil.$("button3").onClick= Eventfun2; // Ao adicionar vários métodos ao atributo de evento, o último de saying de eventfun; //eventutil.$, inspeção, o que é o que é o que é o que é o que é o que é o que é o que é o que é, o que é o que você está fazendo, com o objetivo de avaliar o desempenho dos que se dizem mais que o número de eventos, o que é um dos eventos, o que é um dos dois anos. = function () {function getById (id) {retornar document.getElementById (id); }; // escrito por Dean Edwards, 2005 // com entrada de Tino Zijdel, Matthias Miller, Diego Perini // http://dean.edwards.name/weblog/2005/10/add-event/ function addEvent, tipo, tipo, handler) {if (elegent.adDener), (elemento) {typer) {if (elegent.adDener (FalseVent), tipo Handler. } else {// Atribua cada manipulador de evento um ID exclusivo if (! manipulador. $$ guid) manipulador. $$ guid = addEvent.guid ++; // Crie uma tabela de hash de tipos de eventos para o elemento if (! element.events) element.events = {}; // Crie uma tabela de hash de manipuladores de eventos para cada par de elementos/eventos var manipuladores = element.events [type]; if (! manipuladores) {manipuladores = element.events [type] = {}; // Armazene o manipulador de eventos existente (se houver um) se (elemento ["on" + type]) {manipuladores [0] = elemento ["on" + type]; }} // armazenar o manipulador de eventos nos manipuladores de tabela de hash [manipulador. $$ guid] = manipulador; // Atribua um manipulador de eventos globais para fazer todo o elemento de trabalho ["on" + type] = handleEvent; }}; // um contador usado para criar IDs exclusivos addEvent.guid = 1; function removevent (elemento, tipo, manipulador) {if (element.RemoveEventListener) {element.RemoveEventListener (tipo, manipulador, false); } else {// exclua o manipulador de eventos da tabela de hash if (element.events && element.events [type]) {delete element.events [type] [handler. $$ guid]; }}}; function handlevent (event) {var returnValue = true; // pega o objeto de evento (ou seja, usa um objeto de evento global) Evento = evento || FixEvent (((this.ownerDocument || this.document || this) .ParentWindow || janela) .Event); // Obtenha uma referência à tabela de hash dos manipuladores de eventos var manipuladores = this.events [event.type]; // execute cada manipulador de eventos para (var i em manipuladores) {this. $$ handleEvent = manipuladores [i]; if (this. $$ handleEvent (evento) === false) {returnValue = false; }} retornar retornarValue; }; function fixEvent (event) {// Adicione W3C Standard Event Methods Event.PreventDefault = FixEvent.PreventDefault; event.stopPropagation = FixEvent.StopPropagation; evento de retorno; }; fixevent.preventDefault = function () {this.returnValue = false; }; fixevent.stopPropagation = function () {this.cancelbubble = true; }; função tableadDevent () {}; retornar {add: addEvent, remover: removervent, $: getById}} (); var Outleobj = eventUtil. $ ("Outle"); //addevent.apply(eventutil, emouteleobj,"click ", eventfun3]); //Eventutil.add(outeleobj,"Click",EventFun3); var inputObJ = eventUtil. $ ("Button4"); var tabeleele = eventUtil. $ ("htmlelectable"); var tabtrele = tabelale.getElementsByTagName ("tr"); EventUtil.add (Tabelale, "Clique", EventFun3); for (i = 0; i <tabtrele.length; i ++) {eventUtil.add (tabtrele [i], "clique", eventfun3); } EventUtil.remove (tabela, "clique", eventfun3); // método de exclusão de eventos eventUtil.add (tabela, "clique", eventfun3); // eventutil.add (inputObj, "click", eventfun3); //Eventutil.remove(outeleobj,"Click",EventFun3); //Console.log(adDevent); // addEvent (inputObj, "clique", eventfun3, true); // DeLevent (Outleobj, "Click", Eventfun3, False); </script> </body> </html>PS: Aqui fornecemos uma ferramenta on -line sobre eventos JS, que resume os tipos de eventos e funções de eventos comumente usados de JS:
Uma lista completa de eventos e funções JavaScript:
http://tools.vevb.com/table/javascript_event