表单元素的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 相关文章推荐
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
如何利用js在两个html窗口间通信
Apr 27 Javascript
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
php基础知识:函数基础知识
2006/12/13 PHP
php分页示例代码
2007/03/19 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
Python3 修改默认环境的方法
2019/02/16 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
细说CSS3中的选择符
2008/10/17 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
单位授权委托书范文
2014/08/02 职场文书
公司员工活动策划方案
2014/08/20 职场文书
县委务虚会发言材料
2014/10/20 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
社区植树节活动总结
2015/02/06 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS