关于form提交事件

正在努力的小猿

已于 2023-04-06 22:16:07 修改

阅读量1.2k

点赞数 3

文章标签： javascript 前端 html

于 2023-04-03 15:33:27 首次发布

本文链接：https://blog.csdn.net/weixin_53983124/article/details/129930096

版权

文章讲述了HTML表单的submit事件和click事件监听，以及如何阻止表单的默认提交行为。通过示例代码解释了表单提交后页面跳转的机制，强调了使用`preventDefault()`阻止默认事件的重要性。同时，对比了使用`location.href`与表单`action`属性进行页面跳转的差异。

摘要由CSDN通过智能技术生成

1.表单的事关于件监听

代码1

<body>
    <form>
        <button>提交</button>
    </form>


    <script>
        const form =document.querySelector('form')
        form.addEventListener('submit',function(){
            console.log(1);
        })
    </script>
</body>

 <!-- ------------------------------------------------------- -->
<body>

<form>
    <button>提交</button>
</form>
        
    <script>
        const btn =document.querySelector('button')
        btn.addEventListener('click',function(){
            console.log(1);
        })
    </script>
</body>

输出结果：刷新页面有 1 闪过

原因：

1.因为表单的默认提交事件，点击提交后会跳转页面，而具体跳转到哪是由表单的action属性决定的，如果action没有值或者没写action也会跳转，只是跳转到自己的页面，达到一个页面刷新的效果。

2.表单中的按钮如果没有去设置类型，那么默认 type='submit'

代码2

<body>
    <form>
        <button>提交</button>
    </form>


    <script>
        const form =document.querySelector('form')
        form.addEventListener('submit',function(e){
            e.preventDefault()
            console.log(1);
        })
    </script>
</body>

 <!-- ------------------------------------------------------- -->
<body>

<form>
    <button>提交</button>
</form>
        
    <script>
        const btn =document.querySelector('button')
        btn.addEventListener('click',function(e){
            e.preventDefault()
            console.log(1);
        })
    </script>
</body>

结果：控制台输出 1

由于表单的默认行为，导致我们控制台没有打印我们想要的结果，那么我阻止他的默认行为，这样我们就可以在控制台看到我们想要的结果了

关于form表单提交后页面跳转

请看代码1：

<body>
    <form>
        <button>按钮</button>
    </form>

    <script>
        const form=document.querySelector('form')
        form.addEventListener('submit',function(){
            location.href='https://www.baidu.com/'
        })
    </script>
</body>

点击表单提交按钮，通过location.href 直接跳转到百度页面。这个代码能实现该功能么？结果是不可以的。

原因：由之前的结果可以得知虽然没有添加阻止默认事件，里面的代码还是会执行，所以这个地方可以理解成location的执行速度比form表单提交的速度要慢，location还是执行完，form就提交了

代码2

<body>
    <form>
        <button>按钮</button>
    </form>

    <script>
        const form=document.querySelector('form')
        form.addEventListener('submit',function(e){
            e.preventDefault()
            location.href='https://www.baidu.com/'
        })
    </script>
</body>

以上代码的话，阻止了表单的默认事件，location.href 也实现了跳转。所以如果要在表单中实现页面的跳转，使用location 的话，一定要记得阻止默认事件，当然我们也可以使用表单的action属性进行页面的跳转

以上如果有问题还请指出，谢谢观看