Quando o método do formulário enviado diretamente ligando para JS, o evento de envio não responde. Por que? Se você sabe, por favor responda. Para uma analogia, usei o input.Select () para testá -lo, mas foi capaz de responder ao evento selecionado. Vamos deixar esse motivo de lado, vamos ver como resolver o problema atual primeiro.
Exemplo de código que não responde a eventos:
<form id = form1 action = http: //www.jb51com> </morm>
<Script Type = Text/JavaScript>
var form = document.getElementById ('form1');
form.OnsubMit = function () {
alerta (1);
};
form.subMit ();
</script>
Na operação real, nenhum alerta será lançado.
Embora o uso do método de envio para enviar um formulário viole o princípio do JavaScript discreto, às vezes você precisa usá -lo. Por exemplo, depois de selecionar o item, você precisa usar o JS para enviar o formulário de pesquisa.
2. Análise de problemasComo o evento em si não responde, é possível acionar esses eventos manualmente. Antes de determinar o plano de acionamento manual, vamos revisar o método de registro do evento:
Existem dois métodos de registro originais, consulte o exemplo do código:
<form id = form1 action = https: //www.vevb.com onSubMit = alert (1)> </morm> <formig id = form1 action = https: //www.vevb.com> </morm>
<Script Type = Text/JavaScript>
document.getElementById ('form1'). OnsubMit = function () {
alerta (1);
}
</script>
Esse evento de registro adicionará um método OnSubmit para formar. Portanto, é possível executar diretamente esse método, o que é equivalente a acionar manualmente o evento.
Veja o exemplo do código:
<Script Type = Text/JavaScript>
form.OnsubMit ();
</script>
Isso lhe dá um alerta.
No entanto, o método avançado de registro padrão DOM2 e o método de registro do IE Anexevent já são muito usados. O método onSubmit não existe nesses métodos de registro. Se o form.OnsubMIT () for usado, um erro será relatado diretamente.
3. SoluçãoObviamente, o próprio método de registro avançado também fornece uma solução para desencadear manualmente eventos, mas só precisa escrever programas diferentes para o padrão DOM2 e o IE. Além disso, este programa também é eficaz para o método de registro original. Por favor, veja o exemplo do código:
<Script Type = Text/JavaScript>
// Evento de incêndio
if (form.fireevent) {
form.fireevent ('Onsubmit');
form.subMit ();
// Evento de incêndio DOM2
} else if (document.createevent) {
var ev = document.createevent ('htmlevents');
Ev.initevent ('submeter', falso, verdadeiro);
form.dispatchEvent (EV);
}
</script>
4. Resumo do códigoNão vou mais explicar os detalhes aqui. Amigos que não estão familiarizados com isso, verifique as informações relevantes por si mesmo. Vamos amarrar todo o código:
<! Doctype html public -// w3c // dtd html 4.01 // en http://www.w3.org/tr/html4/strict.dtd>
<html>
<head>
<meta http-equiv = content-type content = text/html; charset = gbk>
<Title> Envie </title>
<script type = text/javascript src = http: //k.kbcdn.com/js/yui/build/utilities/utilities.js> </script>
</head>
<Body>
<form id = form1 action = https: //www.vevb.com> </morm>
<Script Type = Text/JavaScript>
var form = document.getElementById ('form1');
// evento de registro yui
Yahoo.util.event.on ('form1', 'envia', function () {
alerta ('yui');
});
// Evento de registro DOM0
form.OnsubMit = function () {
alerta (1);
};
// Evento de registro DOM2
if (form.addeventListener) {
form.addeventListener ('submeter', function () {
alerta (2);
}, false);
// Evento de registro, ou seja, registro
} else if (form.attachevent) {
form.attachevent ('Onsubmit', function () {
alerta (2);
});
}
// Evento de incêndio
if (form.fireevent) {
form.fireevent ('Onsubmit');
form.subMit ();
// Evento de incêndio DOM2
} else if (document.createevent) {
var ev = document.createevent ('htmlevents');
Ev.initevent ('submeter', falso, verdadeiro);
form.dispatchEvent (EV);
}
</script>
</body>
</html>
Há um pequeno problema com toda a corrida. Sob FX, Form.Submit () não é necessário. Eu enviei diretamente o formulário, então essa frase também é salva. Por favor, responda se você souber o motivo.
Esta demonstração foi testada em IE6/IE7/FX.