JavaScript DOM表单相关操作之表单相关事件
iShot_2024-01-23_18.44.04.png
1、焦点事件
焦点事件就是鼠标的光标事件，点到输入框中，叫做获得焦点事件，当鼠标离开这个输入框时叫做失去焦点事件。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n5" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre; background: rgb(51, 51, 51); padding: 10px 10px 10px 30px; width: inherit; caret-color: rgb(184, 191, 198); color: rgb(184, 191, 198); font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; text-indent: 0px; text-transform: none; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none; position: relative !important;"><!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></pre>
2、onchange事件
在实际项目开发中，有关表单方面还有一个radio和checkbox类型的表单选中事件也非常常用
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n10" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre; background: rgb(51, 51, 51); padding: 10px 10px 10px 30px; width: inherit; caret-color: rgb(184, 191, 198); color: rgb(184, 191, 198); font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; text-indent: 0px; text-transform: none; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none; position: relative !important;">// 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)">男
<input type="radio" name="sex" value="女" onchange="change(this)">女
</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
<input type="checkbox" name="hobby" value="PHP" onchange="change(this)">PHP
</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></pre>
3、表单提交事件
onsubmit事件 会在我们点击submit类型的按钮时被触发，这个事件经常被用在表达提交的时候进行数据验证，当用户提交的数据不合法时则拒绝提交。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n15" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre; background: rgb(51, 51, 51); padding: 10px 10px 10px 30px; width: inherit; caret-color: rgb(184, 191, 198); color: rgb(184, 191, 198); font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; text-indent: 0px; text-transform: none; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none; position: relative !important;"><!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才能阻止表单的提交</pre>
