Cuando el método de formulario enviado directamente llamando a JS, el evento de envío no responde. ¿Por qué? Si lo sabe, responda. Para una analogía, utilicé input.select () para probarlo, pero pudo responder al evento seleccionado. Pongamos esta razón a un lado, veamos cómo resolver primero el problema actual.
Ejemplo de código que no responde a los eventos:
<Form ID = Form1 Action = http: //www.jb51com> </form>
<script type = text/javaScript>
var form = document.getElementById ('form1');
form.onsubmit = functer () {
alerta (1);
};
form.subMit ();
</script>
En la operación real, no saldrá ninguna alerta.
Aunque el uso del método de envío para enviar un formulario viola el principio de JavaScript discreto, a veces tiene que usarlo. Por ejemplo, después de seleccionar el elemento, debe usar JS para enviar el formulario de búsqueda.
2. Análisis de problemasDado que el evento en sí no responde, solo es posible activar estos eventos manualmente. Antes de determinar el plan de activación manual, revisemos el método de registro del evento:
Hay dos métodos de registro originales, vea el ejemplo de código:
<Form ID = Form1 Action = https: //www.vevb.com onSubMit = alert (1)> </form> <form1 id = form1 action = https: //www.vevb.com> </form>
<script type = text/javaScript>
document.getElementById ('form1'). onSubMit = function () {
alerta (1);
}
</script>
Dicho evento de registro agregará un método en la forma de formular. Por lo tanto, es posible ejecutar directamente este método, que es equivalente a activar manualmente el evento.
Ver el ejemplo del código:
<script type = text/javaScript>
form.onsubmit ();
</script>
Esto te da una alerta.
Sin embargo, el método de registro estándar DOM2 avanzado y el método de registro de IE adjunto a los medios de registro ya se usan muy comúnmente. El método OnSubmit no existe en estos métodos de registro. Si se usa form.onsubmit (), se informará directamente un error.
3. SoluciónPor supuesto, el método de registro avanzado en sí también proporciona una solución para activar eventos manualmente, pero solo necesita escribir diferentes programas para el estándar DOM2 e IE. Además, este programa también es efectivo para el método de registro original. Consulte el ejemplo del código:
<script type = text/javaScript>
// Evento de fuego es decir
if (form.fireevent) {
form.fireeVent ('onsubmit');
form.subMit ();
// evento de fuego dom2
} else if (document.createEvent) {
var ev = document.createEvent ('htmlevents');
ev.initEvent ('enviar', falso, verdadero);
form.dispatchEvent (eV);
}
</script>
4. Resumen del códigoYa no explicaré los detalles aquí. Amigos que no están familiarizados con él, consulte la información relevante usted mismo. Vamos a unir todo el código:
<! Doctype html public -// w3c // dtd html 4.01 // en http://www.w3.org/tr/html4/strict.dtd>
<html>
<Evista>
<meta http-oquiv = content-type content = text/html; charset = gbk>
<title> Enviar </title>
<script type = text/javaScript src = http: //k.kbcdn.com/js/yui/build/utilidades/utilidades.js> </script>
</ablo>
<Body>
<Form ID = Form1 Action = https: //www.vevb.com> </form>
<script type = text/javaScript>
var form = document.getElementById ('form1');
// evento de registro YUI
Yahoo.util.event.on ('form1', 'enviar', function () {
alerta ('yui');
});
// evento de registro dom0
form.onsubmit = functer () {
alerta (1);
};
// evento de registro DOM2
if (form.addeventListener) {
form.addeventListener ('enviar', function () {
alerta (2);
}, FALSO);
// IE Registro Evento
} else if (form.attachevent) {
form.attachevent ('onsubmit', function () {
alerta (2);
});
}
// Evento de fuego es decir
if (form.fireevent) {
form.fireeVent ('onsubmit');
form.subMit ();
// evento de fuego dom2
} else if (document.createEvent) {
var ev = document.createEvent ('htmlevents');
ev.initEvent ('enviar', falso, verdadero);
form.dispatchEvent (eV);
}
</script>
</body>
</html>
Hay un pequeño problema con toda la carrera. En FX, no es necesario form.submit (). Presenté directamente el formulario, por lo que esta oración también se guarda. Responda si sabe el motivo.
Esta demostración fue probada en IE6/IE7/FX.