1. O que é Comissão de Eventos: Nos termos do leigo, os eventos são OnClick, OnMouseOver, OnMouseOut, etc. etc. são eventos. Quanto à delegação, eles são convidados a fazê -lo. Este evento foi adicionado originalmente a certos elementos, mas você o adiciona a outras pessoas para fazer isso para concluir o evento.
Ou seja: use o princípio das bolhas para adicionar eventos aos pais para acionar o efeito de execução.
Benefícios: 1. Melhore o desempenho.
Podemos olhar para um exemplo: cada LI precisa ser acionado para alterar a cor do plano de fundo.
<ul id = "ul"> <li> aaaaaaaaa </li> <li> bbbbbbbb </li> <li> ccccccccccc </li> </ul> window.onload = function () {var al = document.getElementBy ("ul); var ali = soul.El.El.EL.EL.GEGR =; i <ali.length;Dessa forma, podemos adicionar eventos de mouse em Li.
Mas, se pudermos ter muitos loops, isso afetará o desempenho.
Abaixo, podemos usar a delegação de eventos para alcançar esse efeito. HTML permanece inalterado
window.onload = function () {var al = document.getElementById ("ul"); var ali = Ol.getElementsByTagName ("li");/*A fonte do evento deve ser usada aqui: objeto de evento, fonte de evento. Não importa em que evento esteja, desde que o elemento que você opera seja a fonte do evento. IE: window.event.srcelement padrão: event.targetnodename: encontre o nome do rótulo do elemento */ol.onMouseOver = function (ev) {var ev = ev || Window.Event; var Target = Ev.Target || Ev.srcelement; // alert (Target.innerhtml); if (Target.nodename.tolowerCase () == "li") {Target.style.background = "Red";}}} Oul.onMouseOut = function (ev) {var = eV | Window.Event; var Target = Ev.Target || ev.srcelement; // alert (Target.innerhtml); if (Target.nodename.tolowerCase () == "li") {Target.style.background = "";}}}Benefício 2, elementos recém -adicionados também terão eventos anteriores.
Também tomamos este exemplo, mas precisamos adicionar dinamicamente. Clique no botão para adicionar li dinamicamente
como:
<input type = "button" id = "btn"/> <ul id = "ul"> <li> aaaaaaa </li> <li> bbbbbbbb </li> <li> cccccccccc </
Faremos isso sem a Comissão de Eventos:
window.onload = function () {var al = document.getElementById ("ul"); var ali = Ol.getElementsByTagName ("li"); var "Red";} ali [i] .onMouseOut = function () {this.style.background = "";}} obtn.onclick = function () {inow ++; var oli = document.createElement ("li"); oli.innerhtml = 1111 *inow; omemFazendo isso, podemos ver que clique no botão recém-adicionado Li no LI sem o evento de movimentação do mouse para alterar a cor do plano de fundo.
Porque o loop for foi executado ao clicar para adicionar.
Então fazemos isso delegando o evento. É que o HTML permanece inalterado
window.onload = function () {var al = document.getElementById ("ul"); var ali = oul.getElementsByTagName ("li"); var Window.Event; var Target = Ev.Target || Ev.srcelement; // alert (Target.innerhtml); if (Target.nodename.tolowerCase () == "li") {Target.style.background = "Red";}}} Oul.onMouseOut = function (ev) {var = eV | Window.Event; var Target = Ev.Target || Ev.srcelement; // alert (Target.innerhtml); if (Target.nodename.tolowerCase () == "li") {Target.style.background = "";}} obtn.onclick = function () {intow ++; var oli =m document.createeLement ("Li"; *Inow; Oul.appendChild (oli);}}OK:
Assim como em nossas postagens do Weibo, ainda existem eventos anteriores do mouse no novo Weibo Post.
O exposto acima é o comissionamento e os benefícios do evento em JavaScript apresentado a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!