web前端学习笔记26-事件类型——一般事件、页面事件、表单事件

最新推荐文章于 2023-07-13 07:00:00 发布

喵了个咪蛋儿

最新推荐文章于 2023-07-13 07:00:00 发布

阅读量860

点赞数

分类专栏： web前端学习文章标签： javascript js css html html5

本文链接：https://blog.csdn.net/weixin_42727838/article/details/107773549

版权

一、事件类型的分类

事件分为一般事件、页面事件和表单事件

二、一般事件

关键字	释义	关键字	释义
click	单击事件	dblclick	双击事件
mousemove	鼠标移动事件	mouseover	鼠标经过事件
mouseout	鼠标移出事件	mouseenter	鼠标进入事件
mouseleave	鼠标离开事件	mouseup	鼠标抬起事件
mousedown	鼠标按下事件	keydown	键盘按下事件
keyup	键盘抬起事件	keypress	键盘释放事件

【 mouseout(enter) 和 mouseleave(over)的区别 】

不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件（不能冒泡，不能向外层元素传递）
只有在鼠标指针离开被选元素时，才会触发mouseleave事件
mouseleave/mouseover这一组更常用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一般事件</title>
		<style>
			div{
    
				height: 50px;
				margin: 10px;
				color: white;
			}
			#dj{
    
				background: palegoldenrod;
			}
			#sj{
    
				background: palegreen;
			}
			#sbmove{
    
				width: 600px;
				height: 200px;
				margin: 50px auto;
				background: paleturquoise;
			}
			#sbpass{
    
				width: 600px;
				height: 200px;
				margin: 50px auto;
				background: palevioletred;
			}
			#sbdownup{
    
				background: cadetblue;
			}
			#qm{
    
				width: 600px;
				height: 300px;
				margin: 50px auto;
			}
			#sr{
    
				width: 600px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<!-- 一般事件——鼠标事件 -->
		<div id="dj">单击事件</div>
		<div id="sj">双击事件</div>
		<div id="sbmove">鼠标移动相关事件</div>
		<div id="sbpass">鼠标经过/离开事件</div>
		<div id="sbdownup">鼠标按下抬起事件</div>
		<!-- 一般事件——键盘事件 -->
		<textarea id="qm"></textarea>
		<textarea id="sr"></textarea>
		
		<script>
			// 事件类型
			// 一般事件——————————————————————————————
			// 1. 单击事件:click
			var dj=document.getElementById('dj');
			// 事件函数
			function changeBG1(){
    
				// 修改背景颜色
				dj.style.backgroundColor='saddlebrown';
			}
			dj.addEventListener('click',changeBG1,false);
			// 2. 双击事件:dblclick
			var sj=document.getElementById('sj');
			// 事件函数
			function changeBG2(){
    
				// 修改背景颜色
				sj.style.backgroundColor='green';
			}
			sj.addEventListener('dblclick',changeBG2,false);
			// 3. 鼠标移动事件:mousemove			
			var sbmove=document.getElementById('sbmove');
			// 事件函数
			function change1(){
    
				console.log('#########'+Math.random());
			}
			sbmove.

最低0.47元/天解锁文章

喵了个咪蛋儿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web前端学习笔记26-事件类型——一般事件、页面事件、表单事件

一、事件类型的分类1.1 一般事件关键字释义关键字释义click单击事件dblclick双击事件mousemove鼠标移动事件mouseover鼠标经过事件mouseout鼠标移出事件mouseenter鼠标进入事件mouseleave鼠标离开事件mouseup鼠标抬起事件mousedown鼠标按下事件keydown键盘按下事件keyup键盘抬起事件keypress键盘释放事件【 mouseout(enter
复制链接

扫一扫