表单元素的submit()方法和onsubmit事件
2015-09-19 08:03
507 查看
1、表单元素中出现了name="submit"的元素
2、elemForm.submit();不会触发表单的onsubmit事件
3、动态创建表单时遇到的问题
表单元素拥有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。
相关文章推荐
- jquery2
- 优化MySchool数据库设计之【巅峰对决】
- 使用awk命令向集群中其他机器拷贝文件
- 32位ubuntu14.04手动编译hadoop2.6.0
- Android 图片特效处理:Shader着色器、渲染
- Android 自定义九宫格控件Gridview用法以及属性
- 【HAOI2012】【BZOJ2751】容易题(easy)
- 中文圣经 for Android
- springmvc文件上传的三种方式
- 夫差
- 伍子胥
- My test program from learning "move constructor", "move assignment". For personal memo purpose.
- Node.js开发入门—UDP编程
- 【poj3734】矩阵乘法
- 黑马程序员——ios开发基础之OC中的Foundation框架(一)
- Spark修炼之道(进阶篇)——Spark入门到精通:第一节 Spark 1.5.0集群搭建
- Linux系统函数write(strlen、sizeof与write结合使用的区别)
- C++的类的声明及成员变量和成员函数
- Python:C语言扩展
- leetcode 268 Missing Number