有如下一段结构:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="form_test" action="/myurl" method="post" >
用户名:<input type="text" value="" id="username"/>
密 码:<input type="text" value="" id="password"/>
<button id="submit_btn">提交</button>
</form>
</body>
</html>
浏览器显示:
注意一点:我没有给button指定type类型,很多人觉得语义化的button标签其实就是type=“button”,这是错误的!!!
行为一:
当我点击提交,页面发生了跳转,跳转的url是我在form标签中action属性定义的url!所以:表单中的button标签默认类型是submit
行为二:
当在用户框或者密码框中得到焦点后,我按下回车。浏览器也发生了像行为一那样的跳转。
表单中会自动注册回车提交事件,并且IE中表现一致 。现在在项目中绝大多数都是用ajax提交表单,没必要在form的action中填写url,还是刚才的DOM结构只是去掉了action属性(容易被忽略的)
在刚在的DOM结构下加下面这段js代码:
var submit_btn = document.querySelector("#submit_btn")
submit_btn.onclick = function(e) {
debugger
// e.preventDefault();
console.log('submit_btn')
}
页面跑起来时会发现代码的执行进入了这个按钮点击事件,执行了里面的代码,然后页面再去跳转到form表单中的action地址
行为三:
当未指名form action 属性和button type类型,会先触发自定义按钮事件然后表单请求事件(表单又重新刷新了一遍)
我们把form标签中的action属性去掉然后点击提交按钮,发现代码也是进入按钮事件绑定的事件处理函数,只是最后没有去跳转url而是页面进行了刷新。
阻止form表单的默认行为
阻止form表单的默认行为说白了就是阻止以上3中行为的一个共同表现:阻止页面的跳转与刷新
方式一:解决点击没有设置type属性的按钮的默认行为
1、在button按钮加上type属性,属性值选择不是submit
2、在button的事件处理函数中加入阻止默认行为的语句。代码如下:
submit_btn.onclick = function(e) {
e.preventDefault();//阻止默认行为
console.log('submit_btn')
}
方式二:解决input框按回车键得默认行为
在form表单的onsubmit事件中加入阻止默认行为的语句。代码如下:
form_test.onsubmit = function(e) {
e.preventDefault();
console.log('123')
}
方式三:在form标签下加入onsubmit = "return false"的属性。
<form id="form_test" action="/myurl" method="post" onsubmit="return false" >
用户名:<input type="text" value="" id="username"/>
密 码:<input type="text" value="" id="password"/>
<button id="submit_btn" type="button">提交</button>
</form>
这样操作后,我们点击未设置type属性的button按钮,或者在input框中按下回车,都不会有页面刷新或者跳转的默认行为了。