1. Fluxo de eventos
A ordem em que o elemento HTML desencadeia eventos.
2. O fluxo de eventos da Bubble de Evento, IE, é chamado de Bubble de Evento, o que significa que o evento começa pelo elemento mais específico (o nó com o nível de nidificação mais profundo no documento) e, em seguida, propaga passo a passo para o nó menos específico (documento). 3. Captura de eventos A idéia de captura de eventos é que nós menos específicos devem receber eventos mais cedo, enquanto os nós mais específicos devem receber nós no final. O objetivo da captura de eventos é capturar o evento antes de atingir o alvo predeterminado.
DOM Stream de eventos
O fluxo de eventos especificado no "fluxo de eventos de nível DOM2" inclui três estágios: o estágio de captura de eventos, o estágio de destino e o estágio da bolha. A primeira coisa que acontece é a captura de eventos, que oferece uma oportunidade para interceptar eventos. Então o alvo real recebe o evento. O último estágio é a fase de bolhas, onde os eventos podem ser respondidos. Tomando uma página HTML simples como exemplo, clicar no elemento <div> acionará eventos na ordem mostrada abaixo.
No fluxo de eventos DOM, o alvo real (<div> elemento) não recebe eventos durante a fase de captura. Isso significa que, durante a fase de captura, o evento para após o documento para <html> e depois para <body>. O próximo estágio é o estágio "direcionado", então o evento ocorre no <div> e é visto como parte da fase da bolha no processamento de eventos. Então a fase da bolha ocorre e o evento se propaga de volta ao documento.
A maioria dos navegadores que suportam o streaming de eventos DOM implementa um comportamento específico; Embora a especificação "DOM2 Nível Event" exija claramente que o estágio de captura não envolva o alvo do evento, Safari, Chrome, Firefox e Opera9.5 e posteriormente desencadearão eventos em objetos de evento durante o estágio de captura. Como resultado, existem duas oportunidades para operar eventos no objeto de destino.
Pare os eventos de bolhas
experimentar
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <script type = "text/javascript"> functtn () {alert ('botão'); // cancelBubble (); prevenir bolhas de eventos} // Obtenha função do objeto de evento getEvent () {// se for ie ou chromeif (window.event) {return window.event;} // para firefoxfunc = getEvent.caller; // Obtenha o chamador de função while (func! = null) {var arg0 = func.arguments [0]; // obtenha o primeiro parâmetro do chamador // julga se o parâmetro está vazio se (arg0) {// julga se o arg0 é um objeto de evento if ((arg0.Constructor == Event || arg0.Constructor == Mouseevent || object.Constructor == KeyBoardEvent) || (tipof (arg0) == "" arg0.stopPropagation)) {return arg0; }} // obtenha func chamador func = func.caller;} return null;} // bloquear bolhas função cancelbubble () {event = getEvent (); // Firefox Chrome if (event.preventDefault) {event.preventDefault (); event.stopPropagation (); } else {// ie event.cancelbubble = true; event.returnValue = false; }} </script> </adhead> <corpo onclick = "alert ('body')"> <div onclick = "alert ('div');" Style = "Background-Color: Green"> <Button OnClick = "Onbtn ()"> DSD </butut> </div> </body> </html>O código HTML acima é executado na ordem de acionamento do evento.
Padrão: 'Button' aparecerá ---》 aparecerá 'div' ----》 vai aparecer 'corpo'
Se você adicionar o código cancelbubble (): somente 'Button' será exibido
O artigo acima tem uma compreensão profunda do mecanismo de eventos JS DOM. É todo o conteúdo que compartilhei com você. Espero que possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.