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

1、焦点事件

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

javascript 复制代码
<!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类型的表单选中事件也非常常用

javascript 复制代码
// 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类型的按钮时被触发,这个事件经常被用在表达提交的时候进行数据验证,当用户提交的数据不合法时则拒绝提交。

javascript 复制代码
<!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才能阻止表单的提交
相关推荐
前端Hardy4 小时前
HTML&CSS:MacBook Air 3D 动画跃然屏上
前端·javascript·css·3d·html
loey_ln5 小时前
观察者模式和发布订阅模式
javascript·观察者模式·react.js
ZL_5677 小时前
uniapp中使用uni-forms实现表单管理,验证表单
前端·javascript·uni-app
sunly_8 小时前
Flutter:启动屏逻辑处理02:启动页
android·javascript·flutter
EasyNTS8 小时前
H5流媒体播放器EasyPlayer.js网页直播/点播播放器如果H.265视频在播放器上播放不流畅,可以考虑的解决方案
javascript·音视频·h.265
莘薪8 小时前
JQuery -- 第九课
前端·javascript·jquery
在路上`9 小时前
vue实现列表滑动下拉加载数据
javascript·vue.js·ecmascript
蒜蓉大猩猩9 小时前
Vue.js --- Vue3中其他组合式API
前端·javascript·vue.js·前端框架·node.js·html
珹洺9 小时前
从 HTML 到 CSS:开启网页样式之旅(开篇之一)——CSS 初体验与网页样式新征程
前端·javascript·css·前端框架·html
前端Hardy9 小时前
HTML&CSS:翻书加载效果
前端·javascript·css·3d·html·css3