js中的事件

最新推荐文章于 2024-07-17 09:44:02 发布

夺笋123

最新推荐文章于 2024-07-17 09:44:02 发布

阅读量109

点赞数

分类专栏： # js基础文章标签： javascript

本文链接：https://blog.csdn.net/m0_54510474/article/details/125012207

版权

js基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

页面事件

事件	描述
onload	当用户进入页面而且所有页面元素都加载完成时，就会触发这个事件。如广告弹出窗口
onbeforeunload	当用户开始离开页面之前触发（比如用户编辑某个站点的内容未保存就要离开时页面弹出的弹窗）

鼠标事件

用户与页面的许多交互都是通过鼠标完成的，

事件	描述
onclick	单击事件
onmouseover	移入事件
onmouseout	移出事件
onmousemove	移动事件
onmousedown	鼠标按下一瞬间触发的事件
onmouseup	鼠标松开一瞬间触发的事件

注意：任意HTML标签元素都可以被添加单击事件

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个html5 demo</title>
    <style>
    	p{
    		font-size: 20px;
    		width: 50%;
    	}
    </style>
</head>
<body>
	<script>
		window.onload=function(){
			let option=document.getElementById("content");
			//鼠标单击
			option.onclick=function(){
				alert("这是一个提示框");
			}
			//鼠标移入
			option.onmouseover=function(){
				this.style.backgroundColor="#1ea21e"
			}
			//鼠标移出
			option.onmouseout=function(){
				this.style.backgroundColor="#a26321"
			}
		}
	</script>
	<p id="content">这是一个段落</p>
</body>
</html>

Chrome浏览器运行结果
在这里插入图片描述

键盘事件

事件	描述
onkeydown	键盘按下
onkeyup	键盘松开

表单事件

事件	描述
onfoucs	获得焦点时触发的事件
onblur	失去焦点时触发的事件
onchange	onfocus和onblur两个事件经常配合在一起使用

比如，用户准备在文本框中输入内容时，此时文本框会获得光标，就会触发onfocus事件；当文本框失去光标时，则会触发onblur事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个html5 demo</title>
    <script>
    	window.onload=function(){
    		let myinput=document.getElementById("search")
    		myinput.onfocus=function(){
    			if (this.placeholder=="百度一下,你就知道"){
    				this.placeholder=""
    			}
    		}
    		myinput.onblur=function(){
    			if(this.placeholder==""){
    				this.placeholder="百度一下,你就知道"
    			}
    		}
    	}
    </script>
    <style>
    	input{
    		height: 25px;
    	}
    </style>

</head>
<body>
	<input id="search" type="text" placeholder="百度一下,你就知道"/>
	<input id="Button" type="button" value="搜索"/>
</body>
</html>

Chrome浏览器运行结果
在这里插入图片描述

关于焦点
并非所有的HTML元素都有焦点事件，一般具有“获得与失去焦点”的元素只有两种：表单元素和超链接。实际上焦点事件一般用于单行文本框和多行文本框

编辑事件

防止页面内容被复制

//在用户通过点击鼠标右键的复制选项后，不能在粘贴版上得不到内容
document.oncopy=function(){
	return false;
}

防止页面内容被选取

//用户无法选择内容
document.onselectstart=function(){
	return false;
}

禁止使用鼠标右键

//仅仅不能够鼠标右键，但能够使用快捷键
document.oncontextmenu=function(){
	return false;
}