表单元素的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 相关文章推荐
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
js实现照片墙功能实例
Feb 05 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
Vue实现可移动水平时间轴
Jun 29 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 301转向实现代码
2008/09/18 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
php类自动加载器实现方法
2015/07/28 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
python实现倒计时的示例
2014/02/14 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
中职生自荐信
2013/10/13 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
机械操作工岗位职责
2014/08/08 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
APP界面设计技巧和注意事项
2022/04/29 杂记
MySQL存储过程及语法详解
2022/08/05 MySQL