QQ:3020889729 小蔡
事件三要素
事件三要素：事件源（某一个元素，如获取的满足条件的p标签元素），事件类型（需要什么样的事件，onclick点击事件），事件处理程序（事件产生之后的动作/如何处理事件）。
事件源
要发生一个事件，要确定一个事件源——也就是被触发的元素。
比如：当有一个button鼠标点击后，执行响应的程序。那么这个button就是做本点击事件的事件源——因为，当我们按下它时，它是被触发了的，然后对应着执行一定的程序。
移至例程
例子效果：这一个完整的事件中，button被点击，产生下面的效果——button就是事件源，事件的起源~
事件类型
我们确定了事件源，那么这个事件源应该产生什么样的事件呢？
onmouseover（鼠标覆盖内容时——鼠标在事件源之上），onclick(鼠标点击事件)等等——都属于事件类型。
简而言之，事件类型，决定着发生什么事件，与我们实际操作相联系。
移至例程
例子效果：这里的点击——就对应着onclick事件——然后执行该事件下的程序/函数。
事件处理程序/函数
上边已经说了事件源，事件类型——对于最后的事件处理程序就显得相对自然了。
我们有了事件源，和事件类型——那么当我们进行了指定元素下指定类型事件的触发，那么必然应该有对应的响应来执行对吧。所以呢，响应就是我们这里说的事件处理程序了——当某事件触发，那么就会执行该事件的处理程序。
移至例程
例子说明：点击button后，所显示的时间就是我们的处理程序返回了当前的时间并写入指定位置。
显示当前时间——就是这里的事件处理程序。
事件实现的简单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<button style="width:25px;height:18px" id = "but1" type="button" name="button1"></button>
<p id = "sj">
请点击显示当前时间
</p>
<p id = "dq">
当前地区未确定
</p>
</div>
<script type="text/javascript">
<!-- 获取元素作为事件源 -->
var p1 = document.getElementById('sj');//获取元素---方便控制内容
var p2 = document.getElementById('dq');//获取元素---方便控制内容
var but_1 = document.getElementById('but1');//获取元素---作为事件源
var dates = new Date();//得到默认时间
var flag = 1;//刷新标志
//对事件源注册事件——也就是调用事件属性，添加事件服务函数/程序
//类似于中断服务函数，哪一个中断，对应怎样的服务函数
but_1.onclick = function(){
if(flag){
flag=!flag;
p1.innerHTML = dates;//改变元素值
p2.innerHTML = "中国四川绵阳";
}
else{
flag=!flag;
p1.innerHTML = "请点击显示当前时间";
p2.innerHTML = "<span>当前地区未确定</span>";
}
}
</script>
</body>
</html>
效果：
