Este artigo descreve o uso da delegação de eventos JavaScript. Compartilhe para sua referência. A análise específica é a seguinte:
1. Clique em qualquer parte da página para acionar o evento
Crie um arquivo script1.js.
Copie o código da seguinte forma: (function () {
Eventutility.Addevent (Document, "Click", function (EVT) {
alerta ('olá');
});
} ());
Seção de página.
Copie o código da seguinte forma: <head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<Title> </title>
</head>
<Body>
<script src = "eventutility.js"> </sCript>
<script src = "script1.js"> </script>
</body>
</html>
Resultado da saída: Clicar em qualquer página será exibido.
No entanto, às vezes queremos clicar em um elemento no documento para acionar um evento.
2. Use o delegado para desencadear eventos
Adicione uma tag à página.
Copie o código da seguinte forma: <head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<Title> </title>
</head>
<Body>
<div>
<p> <a href = "#"> clique em mim </a> </p>
</div>
<script src = "eventutility.js"> </sCript>
<script src = "script1.js"> </script>
</body>
Modificar script1.js para:
Copie o código da seguinte forma: (function () {
Eventutility.Addevent (Document, "Click", function (EVT) {
// Obtenha o objeto de clique
var no destino = eventutility.getTarget (EVT);
// Obtenha o nome da tag do objeto Click
var tagName = Target.TagName;
// se tag for um
if (tagname === "A") {
alerta ("clique em mim");
// bloqueia o comportamento padrão dos links
Eventutility.PreventDefault (EVT);
}
});
} ());
Resultado da saída: a caixa será exibida apenas se você clicar na tag A na página.
Os benefícios acima são: não importa quantos elementos de tag sejam adicionados ao documento, todas as tags têm a capacidade de ser acionadas. Este é o comissionamento do evento. Queremos registrar eventos para elementos filhos, mas primeiro registramos eventos com o elemento pai do elemento filho. Dessa forma, qualquer elemento adicionado dinamicamente e do mesmo tipo que o elemento filho será registrado no elemento pai.
Se registrarmos eventos em elementos filhos e adicionarmos elementos do mesmo tipo que os elementos filhos do documento, devemos registrar eventos para esses elementos filhos que acabaram de ser adicionados dinamicamente.
Além disso, a delegação de eventos faz bom uso de "bolhas de eventos". Ao clicar em um elemento filho, de acordo com "Event Bubble", o elemento pai do elemento filho captura o evento de clique e aciona seu próprio método.
Espero que este artigo seja útil para a programação JavaScript de todos.