事件是用户访问页面时执行的操作,当浏览器探测到一个事件时,它可以触发与这个事件相关联的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 | 失去焦点时触发的事件 |
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;
}