表单元素拥有submit方法,同时也具有onsubmit事件句柄,用于监听表单提交。可以使用elemForm.submit();方法触发表单提交。

1、表单元素中出现了name="submit"的元素

这种情况下elemForm.submit();将不会触发表单提交,因为表单原始的submit方法将会被覆盖(formElem.submit就是对该元素的引用)。

2、elemForm.submit();不会触发表单的onsubmit事件

没有为什么,标准中就是这么规定的。

与此有些类似的是onfocus、onblur和focus()、blur()之间的关系却不同,调用elem.blur()或elem.focus()却会触发onblur和onfocus事件。

这些为我们提供了一个思路,在设计一些UI组件时,需要考虑一些事件在内部调用时是否要触发相关事件。 例如Dialog组件,它具有onopen事件,同时返回的对象也会有open()方法,我们这时就必须考虑下open()方法是否需要触发onopen()事件。

3、动态创建表单时遇到的问题

经常使用的一种方法如下,他会在表单submit前调用,根据validate()函数的返回值决定是否需要提交表单。

<form onsubmit="return validate();"></form>

然而,如果要动态地为一个表单添加验证,即HTML代码中没有写onsubmit,而在页面加载后用javascript给这个form加一个handler,问题就 来了。假设我们已经得到了表单的DOM节点,保存在变量elemForm中,一般这样来给它加上handler:

var check = function() {
if ('OK') {
return true;
} else {
return false;
}
};
if (elemForm.addEventListener) {
elemForm.addEventListener("submit", check, false);
} else if (elemForm.attachEvent) {
elemForm.attachEvent("onsubmit", check);
}

问题就出现了:在Firefox和Chrome中"return false;"是不能阻止表单的提交的(在IE中可以),这就是为什么大家在onsubmit属性中要写"return check()",而不仅仅是"check()"。

原因是什么呢?请看ECMAScript Language Binding,其中明确地写着,"Object EventListener: This is an ECMAScript function reference. This method has no return value. The parameter is a Event object",意思就是event listener没有返回值。 换一种理解,addEventListener可以为元素绑定多个监听函数,某一个事件监听函数的返回值,不可以作为整个事件的返回值。可以使用下面的方法解决

function check(ev) {
ev = ev || window.event; // Event对象
if (ev.preventDefault) { // 标准浏览器
e.preventDefault();
} else { // IE浏览器
window.event.returnValue = false;
}
}

其实一切的根本都因为IE不支持DOM Level 2。

转自:http://www.cnblogs.com/rainman/archive/2011/09/05/2168162.html

表单元素的submit()方法和onsubmit事件(转)的更多相关文章

  1. 表单元素的submit()方法和onsubmit事件

    1.表单元素中出现了name="submit"的元素 2.elemForm.submit();不会触发表单的onsubmit事件 3.动态创建表单时遇到的问题 表单元素拥有subm ...

  2. HTML5 01. 布局、语义化标签、智能化表单、表单元素/标签/属性/事件、多媒体、类操作、自定义属性

    1.知识点 lang = “en”   所用语言是英文 文档结构更简洁 IE8一下不支持h5c3 书写更宽松 div没有语义 标签语义化:在合适的地方使用合适的标签 对seo优化友谊 网页经典布局 页 ...

  3. jquery获取表单元素与回显

    一.获取哦表单元素 dcoument表单文本对象的集合 all[] 对所有html元素的访问 forms 返回对文档中所有form对象的引用 forms[1] 对所有form对象引用 <scri ...

  4. HTML之表单元素

    A.表单元素都是放在<form></form>标签内的.来看看表单的属性  属性 值 描述 accept MIME_type 规定通过文件上传来提交的文件的类型 accept- ...

  5. HTML(三):表单元素

    表单元素概述 表单(Form),用于收集用户信息.提交用户请求等处理过程        1.设计表单,并放入一些输入域        2.网站访问者在自己的计算机上填写上述输入域,并提交到服务器端   ...

  6. JavaScript 学习(2)表单元素

    ##JavaScript 学习-2 1. 表单和表单元素 1.1 form对象 form对象的引用:document.forms[0]或者引用name属性,如:document.forms[" ...

  7. Angular11 模板表单、响应式表单(自定义验证器)、HTTP、表单元素双向绑定

    1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...

  8. html表单元素及表单元素详解

    原文 https://www.jianshu.com/p/b427daa8663d 大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素——文本框 5.表单元素button 6.表单 ...

  9. React 表单元素实例

    代码实例: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...

随机推荐

  1. 移动前端不得不了解的HTML5 head 头标签(2016最新版)

    小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...

  2. HBASE学习笔记--API

    HBaseConfiguration HBaseConfiguration是每一个hbase client都会使用到的对象,它代表的是HBase配置信息.它有两种构造方式: public HBaseC ...

  3. Android 开源库

    http://www.cnblogs.com/hawkon/p/3593709.html

  4. There is no result type defined for type 'json' mapped with name 'success'. Did you mean 'json'?

    错误信息: 严重: Exception starting filter struts2 Unable to load configuration. - action - file:/C:/Users/ ...

  5. 创建、更新、删除文档。 --- Mongodb权威指南阅读。

    插入文档: db.foo.insert({ "key" : "value"}); 使用insert插入一个数据,文档中如果没有_id 会自动给文档增加_id. ...

  6. crontab Linux定时器工具

    要使用crontab定时器工具,必须要启动cron服务: service cron start crontab的语法,以备日后救急.先上张超给力的图: crontab各参数说明: -e : 执行文字编 ...

  7. SSH整合,applicationContext.xml中配置hibernate映射文件问题

    今天在applicationContext.xml中配置sessionFactory时遇到了各种头疼的问题,现在总结一下: 1.<property name="mappingDirec ...

  8. mysql函数操作(3)

    <?php $dbh = new PDO('mysql:dbname=testdb;host=localhost', 'mysql_user', 'mysql_pwd'); $dbh->s ...

  9. JS中格式化数据保留两位小数

    问题:在JS中格式化数据保留两位小数的函数的多种方法 最好方法: 保留两位好像是这样吧     var   a   =   9.39393;     alert(a.toFixed(2)); 说明: ...

  10. C语言入门(7)——自定义函数

    C源程序是由函数组成的.虽然在C语言入门系列前面几篇的程序中大都只有一个主函数main(),但实用程序往往由多个函数组成.函数是C源程序的基本模块,通过对函数模块的调用实现特定的功能.C语言中的函数相 ...