表单元素拥有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。

转自:http://www.cnblogs.com/rainman/archive/2011/09/05/2168162.html

表单元素的submit()方法和onsubmit事件(转)的更多相关文章

  1. 表单元素的submit()方法和onsubmit事件

    1.表单元素中出现了name="submit"的元素 2.elemForm.submit();不会触发表单的onsubmit事件 3.动态创建表单时遇到的问题 表单元素拥有subm ...

  2. HTML5 01. 布局、语义化标签、智能化表单、表单元素/标签/属性/事件、多媒体、类操作、自定义属性

    1.知识点 lang = “en”   所用语言是英文 文档结构更简洁 IE8一下不支持h5c3 书写更宽松 div没有语义 标签语义化:在合适的地方使用合适的标签 对seo优化友谊 网页经典布局 页 ...

  3. jquery获取表单元素与回显

    一.获取哦表单元素 dcoument表单文本对象的集合 all[] 对所有html元素的访问 forms 返回对文档中所有form对象的引用 forms[1] 对所有form对象引用 <scri ...

  4. HTML之表单元素

    A.表单元素都是放在<form></form>标签内的.来看看表单的属性  属性 值 描述 accept MIME_type 规定通过文件上传来提交的文件的类型 accept- ...

  5. HTML(三):表单元素

    表单元素概述 表单(Form),用于收集用户信息.提交用户请求等处理过程        1.设计表单,并放入一些输入域        2.网站访问者在自己的计算机上填写上述输入域,并提交到服务器端   ...

  6. JavaScript 学习(2)表单元素

    ##JavaScript 学习-2 1. 表单和表单元素 1.1 form对象 form对象的引用:document.forms[0]或者引用name属性,如:document.forms[" ...

  7. Angular11 模板表单、响应式表单(自定义验证器)、HTTP、表单元素双向绑定

    1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...

  8. html表单元素及表单元素详解

    原文 https://www.jianshu.com/p/b427daa8663d 大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素——文本框 5.表单元素button 6.表单 ...

  9. React 表单元素实例

    代码实例: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...

随机推荐

  1. Java--笔记(5)

    41.面向对象的五大基本原则 (1)单一职责原则(SRP) (2)开放封闭原则(OCP) (3)里氏替换原则(LSP) (4)依赖倒置原则(DIP) (5)接口隔离原则(ISP) 单一职责原则(SRP ...

  2. Windows-007-进程相关命令(netstat、tasklist、taskkill、tskill)实战实例图文详解

    本节主要讲述 Windows 系统下,nestat.tasklist.tskill 三个 CMD 命令的参数,及使用方法:以及如何利用三者结合查看进程信息和结束进程.敬请亲们参阅,希望能对亲们有所帮助 ...

  3. Common Macros for Build Commands and Properties

    https://msdn.microsoft.com/en-us/library/c02as0cs.aspx $(ProjectDir)      The directory of the proje ...

  4. RFID与射频卡电器特性

    电气特性: 容量为8K位EEPrOM: ● 分为16个扇区,每个扇区为4块,每块16个字节,以块为存取单位: ● 每个扇区有独立的一组密码及访问控制: ● 每张卡有唯一序列号,为32位: ● 具有防冲 ...

  5. IOS开发之表视图(UITableView)

    IOS开发之表视图(UITableView)的基本介绍(一) (一):UITableView的基本概念 1.在IOS开发中,表视图的应用十分广泛和普及.因此掌握表视图的用法显得非常重要.一般情况下对于 ...

  6. Core第三方开源Web框架

    NET Core第三方开源Web框架YOYOFx   YOYOFx框架 YOYOFx是一个轻量级用于构建基于 HTTP 的 Web 服务,基于 .NET 和 Mono 平台. 本着学习的态度,造了这个 ...

  7. [Swift]LeetCode970.强整数 | Powerful Integers

    Given two non-negative integers x and y, an integer is powerful if it is equal to x^i + y^j for some ...

  8. Cnario 3.8支持哪些操作系统?

    Cnario是基于Windows平台开发的软件,包含Server.Messenger和Player三个组件,支持以下Windows 版本系统: Server/Messenger 支持英文版的以下操作系 ...

  9. 从技术专家到管理者的思路转变(V1)

    作为技术专家出身的管理者,是一种优势(你所做的很多决策可能比非技术出身的管理者更加具有可行性和性价比).也是一种劣势(你可能会过于自恋自己的技术优势).这取决于你在接下去的职业生涯中,如何取舍你的技术 ...

  10. 11.10 Daily Scrum

    工作进度有点拖后,之后几天要加快步伐了.   Today's tasks  Next week 丁辛 餐厅列表UI设计 餐厅列表事件处理             李承晗             实现指 ...