js submit方法与onsubmit事件

最新推荐文章于 2024-05-17 13:52:13 发布

Coding-lover

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量3.2k

点赞数 1

分类专栏： javascript 文章标签： javascript

javascript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

一．form的submit方法是否会触发onsubmit事件？

测试代码如下：

<html>  
    <head>  
        <meta content="text/html; charset=gb2312" http-equiv="Content-Type">  
    </head>  
    <form id='myform' target="_top" action="http://www.soso.com/q">  
        <input type="text" name="w" value="ball"/><input type="submit" value="搜索" />  
    </form>  

    <script>  
        var obj = document.getElementById('myform');  
        obj.onsubmit = function(){  
            alert('check');  
            return true;  
        }  
        obj.submit();  
    </script>  
</hmtl>

结果是，我们不会看到’check’的弹出框，所以结论是：
submit()方法不会触发onsubmit事件。

二. 如何阻止表单的提交

经常我们的提交表单前都会用js对表单内容作验证，如果有问题，则不希望提单表单。那么，如果阻止表单提交呢？
取决于你用什么方式给表单加入onsubmit事件。

1.dom0方式绑定

<script>  
    var obj = document.getElementById('myform');  
    var check = function(){  
        if ('error'){//验证出错的情况just a demo  
            return false;  
        }else{  
            return true;  
        }  
    }  

    obj.onsubmit = function(){  
        return check();  
    }  
</script>

用这种方式绑定onsubmit事件，表单能否提交取决于onsubmit函数的返回值。false时，表单不会提交。

2.用dom2方式绑定（addEventListener）

看下面这段代码：

<script>  
        var obj = document.getElementById('myform');  
        var check = function(){  
            if ('error') {//验证出错的情况just a demo  
                return false;  
            }  
            else {  
                return true;  
            }  
        }  

        function addListener(element, type, handler){  
            if (!element) {  
                return;  
            }  
            if (element.addEventListener) {  
                element.addEventListener(type, handler, false);  
            }  
            else {//for ie  
                element.attachEvent("on" + type, handler);  
            }  
    }  

    addListener(obj, 'submit', check);  
</script>

你会发现，IE下，可以正常阻止表单提单，但FF及chrome下表单正常提交了…
原因：
ECMAScript Language Binding写明：
addEventListener(type, listener, useCapture)
The listener parameter is a EventListener object.
Object EventListener：This is an ECMAScript function reference. This method has no return value. The parameter is a Event object.
可见，listener是没有返回值的（写了也不会认），因此我们的check函数的返回值是不起作用的。
解决方式：

<script>  
function check(ev) {  
    if ('error') {//验证出错的情况just a demo  
        ev = ev || window.event; // Event对象  
            if (ev.preventDefault) { // 标准浏览器  
                    ev.preventDefault();  
            } else { // IE浏览器  
                    window.event.returnValue = false;  
            }  
    }  
}  
</script>

三．如何用代码触发onsumbit

这也取决于你用何种方式绑定onsubmit事件

1.dom0方式绑定（参见二.1）

这时直接调用onsumit方法即可，根据onsubmit()的返回值决定是否触发submit。

<script>  
if (obj.onsubmit() != false){  
    obj.submit();  
}  
</script>

2.dom2方式绑定（参见二.2）

<script>  
if (obj.fireEvent) {//for ie  
    if (obj.fireEvent('onsubmit')){  
        obj.submit();  
    }     
}  
else if (document.createEvent){  
    var ev = document.createEvent('HTMLEvents');  
    ev.initEvent('submit', false, true);  
    obj.dispatchEvent(ev);  
}  
</script>

转载自：submit方法与onsubmit事件

Coding-lover

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js submit方法与onsubmit事件

一．form的submit方法是否会触发onsubmit事件？测试代码如下：<html> <head> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> </head> <form id='myform' target="_top" action="http
复制链接

扫一扫