1. 介绍：

　　事件就是可以被JS侦测到的行为。
　　用户操作鼠标或键盘后，触发了JS事件，然后产生相应机制。

　　三要素：

- 　　事件源：事件被触发的对象，就是谁触发了这个事件；
- 　　事件类型：如何触发，什么事件；比如：鼠标点击，键盘按下
- 　　事件处理程序：通过一个函数赋值的方式完成。

推荐使用外部样式连接！

2. Event事件：

关键字不可以用作方法名；

　　① 鼠标事件：

- 　　onclick-单击
- 　　ondblclick--双击
- 　　oncontextmenu--右键单击
- 　　(重点) onmouseover--鼠标经过触发事件
- 　　(重点) onmouseout--鼠标离开触发事件(搭配使用)
- 　　onmouseup--鼠标松开
- 　　onmousedown--鼠标按下
- 　　onclick--点击事件(与鼠标松开、按下搭配使用)
- 　　onfocus--获取焦点时触发（不常用）
- 　　onblur--失去焦点时触发

HTML代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>鼠标事件</title>
 7     <!-- 外部连接 CSS -->
 8     <link rel="stylesheet" href="../1208shijian.CSS/test1.css">
 9 </head>
10 <body>
11     <!-- 鼠标事件 -->
12         <!-- 左键单击 -->
13         <!-- <button id="an1" onclick= "dianji()">点击1</button> -->
14         <!-- 左键双击 -->
15         <!-- <button id="an1" ondblclick= "dianji()">点击2</button> -->
16         <!-- 右键单击 -->
17         <!-- <button id="an1" oncontextmenu= "dianji()">点击2</button> -->
18         <!-- 鼠标经过 -->
19         <!-- <button id="an1" onmouseover= "dianji()">点击2</button> -->
20         <!-- 鼠标离开 -->
21         <!-- <button id="an1" onmouseout= "dianji()">点击2</button> -->
22         <!-- 鼠标松开 -->
23         <!-- <button id="an1" onmouseup= "dianji()">点击2</button> -->
24         <!-- 鼠标按下 -->
25         <!-- <button id="an1" onmousedown= "dianji()">点击2</button> -->
26         
27     <!-- 鼠标事件&表单事件 -->
28         <!-- 获取焦点时触发 -->
29         <!-- <input type="text" id="inpiy-1" onfocus="anniu()" value="按钮"> -->
30         <!-- 失去焦点时触发 -->
31         <input type="text" id="inpiy-1" onblur="anniu()" value="按钮">
32 
33 
34     <!-- 外部连接 JS -->
35     <script src="../test1.js"></script>
36 </body>
37 </html>

CSS代码：

1 /* CSS定义盒子样式 */
2 #an1{
3     width: 200px;
4     height: 200px;
5     background-color: palegoldenrod;
6 }

JS代码：

 1 // 鼠标事件
 2 function dianji(){
 3     document.getElementById("an1").style.color = "blue";
 4     document.getElementById("an1").style.backgroundColor = "red";
 5 }
 6 
 7 // 鼠标事件&表单事件
 8 function anniu(){
 9     console.log("按钮！");
10 }

　　② 键盘事件：

- 　　onkeydown--按下键盘触发(是所有键盘分区)
- 　　onkeyup--松开键盘触发(功能键除外)
- 　　onkeypress--按下键盘触发(功能键除外)

HTML代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>键盘事件</title>
 7 </head>
 8 <body>
 9     <!-- 键盘事件 -->
10         <!-- 键盘按下 -->
11         <!-- 按钮：<input type="text" onkeydown="jianpan()"> -->
12         <!-- 键盘松开 -->
13         <!-- 按钮：<input type="text" onkeyup="jianpan()"> -->
14         <!-- 键盘按下 -->
15         按钮：<input type="text" onkeypress="jianpan()">
16 
17     <!-- 外部连接 JS -->
18     <script src="../test1.js"></script>
19 </body>
20 </html>

JS代码：

// 键盘事件 function jianpan(){ console.log("按一下！"); }

　　③ 表单事件：

- 　　(重点) onfocus--获取焦点时触发（不常用）
- 　 (重点) onblur--失去焦点时触发
- 　　(重点) oninput--输入时触发——onkeydown效果相同

HTML代码：

    <!-- 表单事件 -->
        <!-- 获取焦点时 -->
        获取：<input type="text" onfocus="biaodan()"><br>
        <!-- 失去焦点时 -->
        失去：<input type="text" onblur="biaodan()"><br>
        <!-- 失去焦点时 -->
        失去：<input type="text" oninput="biaodan()"><br>

JS代码：

// 表单事件
function biaodan(){
    console.log("按一下！");
}

- 　　(重点) onchange--改变事件(特性：改变一次输出一次) 例：下拉表单select

　　　　　　　注意：改变事件必须在表单(下拉框)内；

HTML代码：

 1     <!-- 表单事件——改变事件    必须在下拉列表 -->
 2     <select name="xiala" id="list-1" onchange="xiala_list()">    
 3         <option value="12月11日">12月11日</option>
 4         <option value="12月12日">12月12日</option>
 5         <option value="12月13日">12月13日</option>
 6         <option value="12月14日">12月14日</option>
 7         <option value="12月15日">12月15日</option>
 8         <option value="12月16日">12月16日</option>
 9     </select>
10 
11     <!-- 外部连接JS -->
12     <script src="../test1.js"></script>

JS代码：

// 表单事件——改变事件
function xiala_list(){
    console.log("变一下！");
}

　　④ 定时器：

　　　　window.onload=function(){};：当页面全部渲染结束才执行，可解决DOM阻塞
　　　　关键字：setInterval(一直执行)/settimeut(执行一次)(function(){},interval-执行时段)
　　　　if(变量 == 值){return;} 当为0时，赋予行内，判断为0则停止；

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器</title>
</head>
<body>
    <!-- 定义计时器 -->
    <p>倒计时：<span id="s">10</span>秒！</p>

    <!-- 连接外部样式JS -->
    <script src="../test1.js"></script>
</body>
</html>

JS代码：

// 定时器
// onload——当页面渲染完成，才执行，解决DOM堵塞问题
window.onload = function(){
var time = 10;
setInterval(function() {
    document.getElementById("s").innerText = time;
    if(time == 0){  // if判断是否执行到0；
        return;
    }
    time --;
}, 1000) // 1s = 1000ms
}