JavaScript中DOM文档事件

飘飘~

已于 2022-09-08 19:44:26 修改

阅读量536

点赞数 4

文章标签： javascript 前端开发语言

于 2022-09-08 19:43:37 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_46420244/article/details/126770460

版权

说明：DOM事件是JavaScript学习过程中非常重要的一个环节。

目录

2.事件三要素

3.事件流的三个阶段

二、相关API

①当窗口获得焦点时候onfocus

②窗口加载完成后onload

③获得焦点时候改变背景颜色

④oninput 当文本框内容改变时，立即将改变内容输出在控制台

①键盘按下事件onkeydown

②键盘松开事件onkeyup

③按下并松开事件onkeypress

④方向键操作盒子案例

前言：今天我们首先会简单介绍一下事件流的相关知识点，之后我们会从窗口事件，表单事件，键盘事件，鼠标事件四个方面详细讲解相关API的使用。

一、事件

1.事件

事件：触发-响应机制。
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

2.事件三要素

事件源:触发(被)事件的元素
事件名称: click 点击事件
事件处理程序:事件触发后要执行的代码(函数形式)

3.事件流的三个阶段

捕获：从 window 对象传到目标元素。
目标阶段：事件通过捕获，到达目标元素，这个阶段就是目标阶段。
冒泡：从目标元素传到 Window 对象

二、相关API

1.窗口事件

获得焦点事件：

①当窗口获得焦点时候onfocus

window.onfocus = function(){

document.write("窗口获得了焦点");

}

当窗口失去焦点时候onblur

window.onblur = function(){

console.log("窗口失去了焦点")

}

②窗口加载完成后onload

window.onload = function(){

console.log("窗口加载完成")

}

窗口大小改变onresize

window.onresize = function(){

alert("窗口大小改变")

}

③获得焦点时候改变背景颜色

var userCode = document.getElementById("userCode");

userCode.onfocus = function(){

this.style.backgroundColor = "red";//this指定当前窗口

}

console.log("这个")

onchange 内容改变事件

userCode.onchange = function () {

console.log(userCode.value);

}

④oninput 当文本框内容改变时，立即将改变内容输出在控制台

userCode.oninput = function () {

console.log(userCode.value);

}

oninvalid获取表单 未能提交时

userCode.oninvalid = function () {

console.log("请您完成表单的内容!");

}

onselect当文本框内容被选中时

userCode.onselect = function () {

// this

console.log("您已经选择了文本框!");

}

2.表单事件

表单验证案例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 账号  不能为空  只能为 数字 字母  6-18 -->
		<!-- 密码  不能为空  只能为 数字 字母  首字母大写 6-12 -->
		<!-- 确认密码   不能为空  与密码一致 -->
		<!-- 确认密码   必须选择 除了0 以外的  与密码一致 -->
		<!-- 身份证号码  不能为空 最后一位为 X 或 x -->
		<form action="#" method="get" id="mForm">
		    <!-- border 边框  align 水平对齐方式 -->
		    <table border="1" align="center">
		        <tr>
		            <td>账号：</td>
		            <td><input type="text" id="zhanghao"/>
		                
		            </td>
		        </tr>
		        <tr>
		            <td>密码：</td>
		            <td><input type="password" id="mimaOne"/>
		                
		            </td>
		        </tr>
		        <tr>
		            <td>确认密码：</td>
		            <td>
		                <input type="password" id="mimaTwo"/>
		                
		            </td>
		        </tr>
		        <tr>
		            <td>手机号码：</td>
		            <td><input type="text" id="phone"/>
		                
		            </td>
		        </tr>
		        <tr>
		            <td>性别：</td>
		            <td>
		                <label><input type="radio" name="sex" checked/>男</label>
		                <input type="radio" name="sex" id="sex1"/><label for="sex1">女</label>
		            </td>
		        </tr>
		        <tr>
		            <td>年级：</td>
		            <td>
		                <select id="nianji">
		                    <option value="0">---请选择---</option>
		                    <option value="1">一年级</option>
		                    <option value="2">二年级</option>
		                    <option value="3">三年级</option>
		                    <option value="4">四年级</option>
		                </select>
		                
		            </td>
		        </tr>
		        <tr>
		            <td>邮箱：</td>
		            <td><input type="text" id="email"/>
		               
		            </td>
		        </tr>
		        <tr>
		            <td>身份证号码：</td>
		            <td><input type="text" id="shenfenzheng"/>
		               
		            </td>
		        </tr>
		        <tr>
		            <td colspan="2" align="center">
		                <input type="submit"/>
		                <input type="reset"/>
		            </td>
		        </tr>
		    </table>
		</form>
		
		<script>
			
			//获取表单
			var mForm = document.getElementById("mForm");//表单
			//根据id获取值
			let zhanghao = document.getElementById("zhanghao");//账号
			let mimaOne = document.getElementById("mimaOne");//密码
			let mimaTwo = document.getElementById("mimaTwo");//确认密码
			let phone = document.getElementById("phone");//电话
			let sex = document.getElementById("sex1");//性别
			let nianji = document.getElementById("nianji");//年级
			let email = document.getElementById("email");//邮箱
			
			//正则表达式
			var code = /^[A-Za-z0-9]{6,16}$///账号
			var pass = /^(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*()_+?<>])[^]{6,}$/;
			var ph = /^1[3456789]\d{9}$/;
			var em = /^[a-zA-Z0-9_-]{4,16}@[a-zA-Z0-9_-]{2,}\.+[comn]{2,3}$/;
			var uId = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
			
			mForm.onsubmit = function(){
				//删除多余span
				var spanSum = document.getElementsByTagName("span");
				if (spanSum != '') {
					for (let i = 0; i < spanSum.length; i++) {
						spanSum[i].remove();
					}
				}
				
				var err = document.createElement("span");
				if(zhanghao.value==''){
					err.innerHTML='账号不能为空';
					err.style.color='red';
					zhanghao.parentElement.appendChild(err);
				}else if(!code.test(zhanghao.value)){
					err.innerHTML='账号格式不正确';
					err.style.color='red';
					zhanghao.parentElement.appendChild(err);
				}else if(mimaOne.value==''){
					err.innerHTML='密码不能为空';
					err.style.color='red';
					mimaOne.parentElement.appendChild(err);
				}else if(!pass.test(mimaOne.value)){
					err.innerHTML='密码格式不正确';
					err.style.color='red';
					mimaOne.parentElement.appendChild(err);
				}else if(mimaTwo.value==''){
					err.innerHTML='密码不能为空';
					err.style.color='red';
					mimaTwo.parentElement.appendChild(err);
				}else if(!pass.test(mimaTwo.value)){
					err.innerHTML='密码格式不正确';
					err.style.color='red';
					mimaTwo.parentElement.appendChild(err);
				}else if(mimaOne.value!=mimaTwo.value){
					err.innerHTML='密码不一致';
					err.style.color='red';
					mimaTwo.parentElement.appendChild(err);
				}else if(phone.value==''){
					err.innerHTML='电话号码不能为空';
					err.style.color='red';
					phone.parentElement.appendChild(err);
				}else if(!ph.test(phone.value)){
					err.innerHTML='手机号码格式错误';
					err.style.color='red';
					phone.parentElement.appendChild(err);
				}else if(nianji.value==''){
					err.innerHTML='请选择年级';
					err.style.color='red';
					nianji.parentElement.appendChild(err);
				}else if(email.value==''){
					err.innerHTML='邮箱不能为空';
					err.style.color='red';
					email.parentElement.appendChild(err);
				}else if(em.test(email)){
					err.innerHTML='邮箱格式不正确';
					err.style.color='red';
					email.parentElement.appendChild(err);
				}else if(shenfenzheng.value==''){
					err.innerHTML='身份证不能为空';
					err.style.color='red';
					shenfenzheng.parentElement.appendChild(err);
				}else if(uId.test(shenfenzheng.value)){
					err.innerHTML='身份证格式不正确';
					err.style.color='red';
					shenfenzheng.parentElement.appendChild(err);
				}else{
					return true;
				}
				return false;
			}
			
			
		</script>
	</body>
</html>

3.键盘事件

①键盘按下事件onkeydown

window.onkeydown = function(event){
		//解决兼容问题
		event = event || window.event;
		console.log("键盘按下了" + event.keyCode);
		if(event.keyCode==13){
			console.log("按下了回车");
		}
	}

②键盘松开事件onkeyup

window.onkeyup = function(event){
		//解决兼容问题
		event = event || window.event;
		console.log("键盘松开了"+event.keyCode);
		if(event.keyCode==13){
			console.log("松开了回车");
		}
	}

③按下并松开事件onkeypress

window.onkeypress = function (event) {
		event = event || window.event;
		console.log("键盘按下了" + event.keyCode);
		if (event.keyCode == 13) {
			console.log('按下了回车');
		}
	}

④方向键操作盒子案例

CSS部分：
<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.divStyle {
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
			}
		</style>
HTML部分：
			var box = document.getElementById("box");
			document.onkeydown = function (event) {
				event  = event ||window.event;
		
				switch (event.keyCode) {
					case 37:
						box.style.left = box.offsetLeft - 10+'px';
						break;
					case 39:
						box.style.left = box.offsetLeft + 10+'px';
						break;
					case 38:
						box.style.top = box.offsetTop - 10+'px';
						break;
					case 40:
						box.style.top = box.offsetTop + 10+'px';
						break;
				}
			}

4.鼠标事件

onmouseenter：当鼠标进入了当前的DIV
onmouseleave：当鼠标移出了当前的DIV
onscroll：当滚动元素的滚动条运行时
onmousewheel：当鼠标的滚轮运行时

案例代码：

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div onmouseenter="divMouseenter()"
     onmouseleave="divMouseleave()"
     style="width: 300px;height: 300px;background: red">
    <div onmouseenter="divMouseenter()"
         onmouseleave="divMouseleave()"
         style="width: 100px;height: 100px;background: pink">
    </div>
</div>

<div id="box" style="overflow: scroll;width: 200px;height: 200px;">
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</div>

<script>
    /* onmouseenter ： 可以阻止事件冒泡 */
    function divMouseenter() {
        console.log("当鼠标进入了当前的DIV");
    }
    /* onmouseleave ： 可以阻止事件冒泡 */
    function divMouseleave() {
        console.log("当鼠标移出了当前的DIV");
    }
    document.getElementById("box").onscroll = function () {
        console.log("当滚动元素的滚动条运行时");
    }
    /* 当鼠标的滚轮运行时 */
    window.onmousewheel=function (){
        console.log("当鼠标的滚轮运行时");
    }
</script>
</body>
</html>

又是一年中秋时，今年你吃的什么味道的月饼呢(*^▽^*)

怀念学习油泼辣子口味的YYDS！！！

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript中DOM文档事件

说明：DOM事件是JavaScript学习过程中非常重要的一个环节。前言：今天我们首先会简单介绍一下事件流的相关知识点，之后我们会从窗口事件，表单事件，键盘事件，鼠标事件四个方面详细讲解相关API的使用。
复制链接

扫一扫

博客等级

码龄4年

23
原创

302
点赞

446
收藏

532
粉丝

关注

私信

热门文章

最新评论

Spring如何解决循环依赖
_一只程序羊: 这玩意怎么研究不明白啊!C
Spring如何解决循环依赖
୧⍤⃝537: 三级缓存提前暴露的一个单例工厂，二级缓存中存储的就是从这个工厂中获取到的对象。好像是因为这个原因
SpringBoot自动配置原理
笑小枫: 读完本文后，感觉大侠文采飞扬，才华过人，在下对你的敬佩之意有如滔滔江水连绵不绝。在下笑小枫，欢迎大佬来我这参观~
常用的加密方式(md5,base64,url,AES对称加密,RSA非对称加密)
飘飘~: 有什么不对的地方欢迎及时指出
Spring如何解决循环依赖
_wink_: 恩人啊

您愿意向朋友推荐“博客详情页”吗？

强烈不推荐
不推荐
一般般
推荐
强烈推荐

提交

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

飘飘~ 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。