js中的事件

事件是用户访问页面时执行的操作,当浏览器探测到一个事件时,它可以触发与这个事件相关联的JavaScript对象,这些对象称为事件处理程序

页面事件

事件描述
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失去焦点时触发的事件
onchangeonfocus和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;
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夺笋123

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

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

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值