表单元素的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 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
javascript 数组学习资料收集
Apr 11 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
openlayers实现地图测距测面
Sep 25 Javascript
vue的项目如何打包上线
Apr 13 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
php简单随机字符串生成方法示例
2017/04/19 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
Python实例一个类背后发生了什么
2016/02/09 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
详解Python time库的使用
2019/10/10 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
Python实现数字的格式化输出
2020/08/01 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
临床医学专业学生的自我评价分享
2013/11/21 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
护士感人事迹
2014/05/01 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
圣诞节开幕词
2015/01/29 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
Python OpenCV形态学运算示例详解
2022/04/07 Python