一.事件是什么？
事件是由三部分组成：事件源、事件类型、事件处理程序！
我们也称之为事件的三要素。
二.示例
来浅试一下事件
<button id="btn">唐伯虎</button>
<input type="button" value="唐伯虎">
<!--
1.事件源
2.事件类型
3.事件处理程序
-->
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
alert('点秋香');
}
var but2 = document.getElementsByTagName('input')
but2[0].onclick = function(){
alert('点秋香');
}
在这里我用的是onclick鼠标单击事件，实际上鼠标事件有很多。重点！！！
以上是常见的鼠标事件。
三.操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性。
下面讲个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">唐伯虎</button>
<input type="button" value="唐伯虎">
<!--
1.事件源
2.事件类型
3.事件处理程序
-->
<script>
//获取元素
var btn = document.getElementById('btn');
//注册事件
btn.onclick = function(){
alert('点秋香');
}
var but2 = document.getElementsByTagName('input')
but2[0].onclick = function(){
alert('点秋香');
}
</script>
</body>
</html>
写了一个关灯的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="关灯">
<script>
var input = document.querySelector('input');
var body = document.body;
var flag = 0;
input.onclick = function(){
if (flag == 0){
body.style.backgroundColor = 'black';
input.value = '开灯';
flag = 1;
} else{
body.style.backgroundColor = '#fff';
input.value = '关灯';
flag = 0;
}
}
</script>
</body>
</html>
这样的话就可以达到开关灯的效果
为了体验样式的属性，我写了一个下拉菜单的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ol{
display: none;
}
</style>
</head>
<body>
<div>
<p>这是一个下拉菜单</p>
<ol>
<li>小米鸡扒饭</li>
<li>火龙果炒鸡蛋</li>
<li>青椒炒肉</li>
<li>全羊宴</li>
</ol>
</div>
<script>
var box = document.querySelector('div');
var ol = document.querySelector('ol')
var p = document.querySelector('p');
p.onmousemove = function(){
ol.style.display = 'inline';
}
p.onmouseout = function(){
ol.style.display = 'none';
}
</script>
</body>
</html>
以上就是事件的基础，其中我们经常用的就是鼠标的各种效果，要保存。是常用的。
