表单元素的submit()方法和onsubmit事件应用概述


Posted in Javascript onFebruary 01, 2013

表单元素拥有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。
Javascript 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
JS的get和set使用示例
Feb 20 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
Vue-Cli项目优化操作的实现
Oct 27 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
js用Date对象处理时间实现思路及代码
Jan 31 #Javascript
document.all的一个比较完整的总结及案例
Jan 31 #Javascript
javascript对select标签的控制(option选项/select)
Jan 31 #Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 #Javascript
js+html+css实现鼠标移动div实例
Jan 30 #Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 #Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 #Javascript
You might like
用PHP4访问Oracle815
2006/10/09 PHP
php 使用post,get的一种简洁方式
2010/04/25 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
PHP asXML()函数讲解
2019/02/03 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
elementui的默认样式修改方法
2018/02/23 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
python操作toml文件的示例代码
2020/11/27 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
程序员跳槽必看面试题总结
2013/06/28 面试题
幼儿园门卫制度
2014/01/29 职场文书
班级旅游计划书
2014/05/03 职场文书
大学生实习证明范本
2014/09/19 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
教师个人学习总结
2015/02/11 职场文书
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫