JavaScript DOM表单相关操作之表单相关事件

1、焦点事件

焦点事件就是鼠标的光标事件，点到输入框中，叫做获得焦点事件，当鼠标离开这个输入框时叫做失去焦点事件。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form><h3>输入框获得和失去焦点触发对应的事件</h3><input type="text" name="username">
</form>
</body>
<script>var obj= document.getElementsByName('username')[0]; // 获取表单元素对象obj.onfocus = function (){console.log('获得焦点');}obj.onblur = function (){console.log('失去焦点');}
</script>
</html>

2、onchange事件

在实际项目开发中，有关表单方面还有一个radio和checkbox类型的表单选中事件也非常常用

// onchange事件在radio表单类型中的应用
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form><h3>radio触发onchange事件</h3><input type="radio" name="sex" value="男" onchange="change(this)">男<br><input type="radio" name="sex" value="女" onchange="change(this)">女<br>
</form>
</body>
<script>function change(obj){var value = obj.value; // 获取对象的值console.log(value); // 打印获取的值}
</script>
</html>// onchange事件在checkbox表单类型中的应用
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form><h3>checkbox触发onchange事件</h3><input type="checkbox" name="hobby" value="Python" onchange="change(this)">Python<br><input type="checkbox" name="hobby" value="PHP" onchange="change(this)">PHP<br>
</form>
</body>
<script>function change(obj){if (obj.checked == true){var value = obj.value; // 获取对象的值console.log(value); // 打印获取的值}}
</script>
</html>// onchenge事件在select下拉框中的使用
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form><h3>select触发onchange事件</h3><select name="city" id="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option></select>
</form>
</body>
<script>// 获取select选择框对象var obj = document.getElementsByName('city')[0];// 绑定onchange事件obj.onchange = function (){console.log(this.value);}
</script>
</html>

3、表单提交事件

onsubmit事件会在我们点击submit类型的按钮时被触发，这个事件经常被用在表达提交的时候进行数据验证，当用户提交的数据不合法时则拒绝提交。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form id="myForm" action="https://www.zhishunet.com"><h3>submit按钮触发onsubmit事件</h3><input type="submit" value="提交表单">
</form>
</body>
<script>// 获取form表单var obj = document.getElementById('myForm');obj.onsubmit = function (){console.log('您点击了submit按钮');return false;  // 返回false阻止提交}
</script>
</html>// 注意
// onsubmit事件必须让这个事件返回false才能阻止表单的提交