Por que você precisa de addEventListener?
Vamos dar uma olhada em um clipe:
Código HTML
<div id = "box"> perseguindo sonhos </div>
Código com on
window.onload = function () {var box = document.getElementById ("caixa"); box.OnClick = function () {console.log ("eu sou box1"); } box.OnClick = function () {box.style.fontsize = "18px"; console.log ("Eu sou Box2"); }} Resultado em execução: "Eu sou Box2"Eu vi, o segundo OnClick substitui o primeiro OnClick. Embora na maioria dos casos possamos usar para concluir os resultados que queremos, às vezes precisamos executar vários eventos idênticos. É óbvio que, se não pudermos usar para concluir o que queremos, não há necessidade de adivinhar. Você deve saber, certo! O AddEventListener pode vincular o mesmo evento várias vezes e não substituirá o evento anterior.
Código com addEventListener
window.onload = function () {var box = document.getElementById ("caixa"); box.addeventListener ("clique", function () {console.log ("eu sou box1");}) box.addeventListener ("clique", function () {console.log ("Eu sou Box2");})} Resultado: Eu sou Box1 I Am Box22O primeiro parâmetro do método addEventListEnert é preenchido no nome do evento. Observe que você não precisa escrever. O segundo parâmetro pode ser uma função. O terceiro parâmetro refere -se ao processo do manipulador de eventos no estágio da bolha ou no estágio de captura. Se a verdadeira representa o processamento do estágio de captura, se falsa representar o processamento do estágio da bolha, o terceiro parâmetro poderá ser omitido. Na maioria dos casos, o terceiro parâmetro não precisa ser usado. Se o terceiro parâmetro não estiver gravado, o false padrão será falso.
Uso do terceiro parâmetro
Às vezes esse é o caso
<Body>
<div id = "Box">
<div id = "filho"> </div>
</div>
</body>
Se eu adicionar um evento de clique na caixa, não há problema se eu clicar diretamente na caixa, mas se eu clicar no elemento filho, como isso faz isso? (Ordem de execução)
box.addeventListener ("clique", function () {console.log ("box");}) child.addeventListener ("click", function () {console.log ("filho");}) Resultado da execução: caixa infantilOu seja, o evento padrão é realizado na ordem em que o evento é bolhas.
Se o terceiro parâmetro for escrito como verdadeiro, ele será realizado na ordem de execução da captura de eventos.
box.adDeventListener ("clique", function () {console.log ("box");}, true) Child.addeventListener ("Click", function () {console.log ("filho");}) Resultado de execução: Box ChildProcesso de execução de bolhas de eventos:
Comece a borbulhar para cima do elemento mais específico (o elemento em que você clicou). Pegue nosso caso acima e a ordem é: Child-> Box
Processo de execução de captura de eventos:
Comece a borbulhar para dentro do elemento menos específico (a caixa na parte externa). Pegue nosso caso acima e o pedido é: Box-> Child
O artigo acima entende de maneira abrangente a diferença entre o AddEventListener e o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.