zoukankan      html  css  js  c++  java
  • 表单元素的submit()方法和onsubmit事件

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

  • 相关阅读:
    Codeforces 1255B Fridge Lockers
    Codeforces 1255A Changing Volume
    Codeforces 1255A Changing Volume
    leetcode 112. 路径总和
    leetcode 129. 求根到叶子节点数字之和
    leetcode 404. 左叶子之和
    leetcode 104. 二叉树的最大深度
    leetcode 235. 二叉搜索树的最近公共祖先
    450. Delete Node in a BST
    树的c++实现--建立一棵树
  • 原文地址:https://www.cnblogs.com/rainman/p/2168162.html
Copyright © 2011-2022 走看看