核心提示：事件就是文档或浏览器窗口发生的一些特定的交互瞬间，事件的三要素 分别是：事件源(触发事件的元素)、事件名称(触发事件的名称)、事件处理函数(触发事件时调用的函数)。在js中有很多事件，下面我们就来说一...
事件就是文档或浏览器窗口发生的一些特定的交互瞬间，事件的三要素 分别是：事件源(触发事件的元素)、事件名称(触发事件的名称)、事件处理函数(触发事件时调用的函数)。
在js中有很多事件，下面我们就来说一下常用的一些事件。
onclick()事件：点击事件，当鼠标点击元素的时候触发的事件，下面的代码做一个展示;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
</head>
<body>
<input type="button" id="btn" value="隐藏">
<br>
<p id="box">
</p>
</body>
</html>
<script>
//获取对象
var oBtn=document.getElementById("btn");
var oBox=document.getElementById("box");
// 给隐藏按钮注册点击事件
oBtn.onclick=function () {
oBox.style.display="none";
}
</script>
2.onfocus()获取焦点事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="search" value="女神的新装" >
</body>
</html>
<script>
window.onload=function () {
var Search = document.getElementById("search");
Search.onfocus=function () {
this.value = "";
}
}
</script>
3.onblur()失去焦点事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="search" value="女神的新装" >
</body>
</html>
<script>
window.onload=function () {
var Search = document.getElementById("search");
Search.onfocus=function () {
this.value = "";
};
Search.onblur=function () {
if(Search.value==""){
this.value = "女神的新装";
}
}
}
</script>
4.onmouseover()当鼠标经过的时候触发
onmouseout()当鼠标离开的时候触
这两个事件通常会放在一起使用，因为当鼠标经过某个元素触发onmouseover()事件之后在鼠标移出之后还需要元素返回原本的样子
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.nodeSmall {
width: 50px;
height: 50px;
background: url(images/bgs.png) no-repeat -159px -51px;
position: fixed;
right: 10px;
top: 40%;
}
.pic {
position: absolute;!important;
top: 0;
left: -150px;
}
.nodeSmall a {
display: block;
width: 50px;
height: 50px;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<p class="nodeSmall" id="node_small">
<a href="#" id="link"></a>
<p class="pic hide" id="er">
<img src="images/456.png" alt="\"/>
</p>
</p>
<script>
//1. 找对象
var link=document.getElementById("link");
var er=document.getElementById("er");
//onmouseover:当鼠标经过的时候触发
//onmouseout:当鼠标离开的时候触
//2. 给a标签注册鼠标经过事件， 让二维码显示
link.onmouseover = function () {
er.className="pic show"
};
//3. 给a标签注册鼠标离开事件， 让二维码隐藏
link.onmouseout=function () {
er.className="pic hide"
}
</script>
</body>
</html>
5.onload()会在页面或图像加载完成后立即发生。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="search" value="女神的新装" >
</body>
</html>
<script>
//调用window的onload方法，当文档加载完成之后才会执行内部的代码，不会因为代码的读取顺序而导致找不到对象
window.onload=function () {
var Search = document.getElementById("search");
Search.onfocus=function () {
this.value = "";
}
}
</script>
