html input oninvalid,【Web前端问题】oninvalid 事件的奇怪现象！！

oninvalid 事件，看文档上说是input标签校验无效时触发，且提示错误信息

奇怪的是form 里的有多个input时，却可以用以下方式阻止提示错误信息:

var form = document.querySelectorAll( "form" )[0];

form.addEventListener( "invalid", function( event ) {

event.preventDefault();

},true);

//全部代码见下面

疑问：

1 . 为什么oninvalid可以用在form上，而且在捕获时有效，冒泡时无效

2 . 为什么event.preventDefault()可以阻止form下所有的input提示信息

3 . 用oninvalid方式并不能阻止提示信息，可见阻止form下的input提示信息并非是浏览器的默认行为

form.oninvalid=function(e){

return false;

}

表单验证默认样式修改

.oneline{line-height: 1.5;margin:10px auto;}

.oneline label{width:100px;text-indent: 15px;font-size:14px;font-family: "Microsoft Yahei";display: inline-block;}

.oneline .sinput{width:60%;height:30px;border-radius: 6px;border:1px solid #e2e2e2;}

.oneline input[type="submit"]{margin-left:20px;width:80px;height:30px;border:0;background-color:#5899d0;color:#fff;font-size:14px;border-radius: 6px;}

.error-messages{color:red;}

用户名:

Email:

var form = document.querySelectorAll( "form" )[0];

form.addEventListener( "invalid", function( event ) {

event.preventDefault();

},true);

form.oninvalid=function(e){

return false;

}