1. 介绍：
事件就是可以被JS侦测到的行为。
用户操作鼠标或键盘后，触发了JS事件，然后产生相应机制。
三要素：
-
- 事件源：事件被触发的对象，就是谁触发了这个事件；
- 事件类型：如何触发，什么事件；比如：鼠标点击，键盘按下
- 事件处理程序：通过一个函数赋值的方式完成。
推荐使用外部样式连接！
2. Event事件：
关键字不可以用作方法名；
① 鼠标事件：
-
- onclick-单击
- ondblclick--双击
- oncontextmenu--右键单击
- (重点) onm ouseover--鼠标经过触发事件
- (重点) onm ouseout--鼠标离开触发事件(搭配使用)
- 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" onm ouseover= "dianji()">点击2</button> --> 20 <!-- 鼠标离开 --> 21 <!-- <button id="an1" onm ouseout= "dianji()">点击2</button> --> 22 <!-- 鼠标松开 --> 23 <!-- <button id="an1" onm ouseup= "dianji()">点击2</button> --> 24 <!-- 鼠标按下 --> 25 <!-- <button id="an1" onm ousedown= "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代码：
// 定时器
// onl oad——当页面渲染完成，才执行，解决DOM堵塞问题
window.onload = function(){
var time = 10;
setInterval(function() {
document.getElementById("s").innerText = time;
if(time == 0){ // if判断是否执行到0；
return;
}
time --;
}, 1000) // 1s = 1000ms
}
解析：
setInterval...innerText—关键字；找到 span 标签内的 s ；将time时长赋予 s ；1000ms=1s；time-- 每次 -1s；此处的if判断放此处 为将倒计时进行到 0 ；每次的值 返回 span 标签内，当为 0 时，return 停止！
标签：触发,12,鼠标,--,JavaScript,JS,事件,Event From： https://www.cnblogs.com/warmNest-llb/p/17888586.html