华子目录
- 事件对象
- `js`事件驱动机制
- 三种事件模型
- 1.标签绑定
- 2.`DOM0`事件模型
- 3.`DOM2`事件模型
- 捕获流与冒泡流
- `removeEventListener`事件移除
- 事件类型
- 鼠标事件`mouse event`
- 键盘事件`keyboard event`
- 多媒体事件`media event`
- 表单事件`form event`
- 窗口事件`window event`
- 其他事件
- 事件对象
- 切换图片小案例
事件对象
JavaScript是采用事件驱动（event-driven）式编程的，通过事件驱动响应用户操作，JavaScript事件是由访问 Web页面的用户引起的一系列操作，例如：用户点击。当用户执行某些操作的时候，再去执行一系列代码。- 事件是浏览器与用户操作进行交互的动作。
js事件驱动机制
JavaScript中事件有三元素：事件源，事件对象，事件处理函数
事件源：一般是页面的标签元素，浏览器的窗口，鼠标的点击等等。事件对象：包含了该事件的所有信息，如事件触发的坐标，事件的类型等，记录的是事件中的事件信息事件处理函数：对这个事件最后的处理行为。
三种事件模型
1.标签绑定
- 这种模型是最传统接单的一种处理事件的方法。
在内联模型中，事件处理函数是HTML标签的一个属性，用于处理指定事件。虽然内联在早期使用较多，但它是和 HTML 混写的， 并没有与HTML分离，不推荐使用。 - 缺点：1、违背了三层分离原则；2、无法得到时间对象；3、事件源需要在绑定时，使用
this关键字传递。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>事件对象</title>
<style type="text/css">
.box{
height: 200px;
width: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<button type="button" onclick="display()">变换颜色</button> //内联模式
<script type="text/javascript">
let num = 1
let temp = document.getElementsByClassName("box")[0];
function display(){
if(num == 1){
temp.style.backgroundColor = "green";
num = 0;
}else{
temp.style.backgroundColor = "pink";
num = 1;
}
}
</script>
</body>
</html>
2.DOM0事件模型
- 为了实现三层分离，w3c提供了基于
DOM0的绑定方式，先获取DOM对象，再绑定事件。这种方式较为常用。 - 绑定事件：
dom对象.onxxx = function()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>事件对象</title>
<style type="text/css">
.box{
height: 200px;
width: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<button type="button" class="but">变换颜色</button>
<script type="text/javascript">
let num = 1
let box = document.getElementsByClassName("box")[0];
let but = document.getElementsByClassName("but")[0];
but.onclick = function(){ //DOM0事件模型
if(num == 1){
box.style.backgroundColor = "green";
num = 0;
}else{
box.style.backgroundColor = "pink";
num = 1;
}
}
</script>
</body>
</html>
3.DOM2事件模型
- DOM2支持同一DOM元素注册多个同种事件。DOM2新增了捕获和冒泡的概念。DOM2事件通过
addEventListener和removeEventListener管理。 addEventListener有三个参数，分别为：事件名称，事件回调，捕获/冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>事件对象</title>
<style type="text/css">
#div1{
height: 200px;
width: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="div1"></div>
<button type="button" id="button1">变换颜色</button>
<script type="text/javascript">
let button = document.getElementById("button1");
let div = document.getElementById("div1");
let num = 1;
//第一个参数不需要加no，直接写事件名称即可
//第二个参数是事件处理函数，函数第一个参数默认就是事件对象
//第三个参数是bool值，表示捕获或者冒泡流
button.addEventListener("click",function(){
if(num == 1){
div.style.backgroundColor = "green";
num = 0;
}else{
div.style.backgroundColor = "pink";
num = 1;
}
},false);
</script>
</body>
</html>
捕获流与冒泡流
- 相比
DOM0，去掉了前边的on而已。回调时和DOM0一样，也会默认传入一个event参数，同时this是指触发该事件的dom节点。最后一个参数是布尔型，true代表捕获事件，false代表冒泡事件 
- 意思就是说，某个元素触发了某个事件，最先得到通知的是
window，然后是document，依次而入，直到真正触发事件的那个元素(目标元素)为止，这个过程就是捕获。接下来，事件会从目标元素开始起泡，再依次而出，直到window对象为止，这个过程就是冒泡。 - 由此可以看出，
捕获事件要比冒泡事件先触发。
removeEventListener事件移除
在JavaScript中，removeEventListener 方法用于从指定元素上移除先前添加的事件监听器。这在使用 addEventListener 添加事件监听器后，想要在某个时刻移除这些监听器时非常有用。
-
解除事件语法：
元素名.removeEventListener("事件名称", "事件回调", "捕获/冒泡")。事件名称，就是说解除哪个事件呗。事件回调，是一个函数，这个函数必须和注册事件的函数是同一个。事件类型，布尔值，这个必须和注册事件时的类型一致
-
也就是说，
名称、回调、类型，三者共同决定解除哪个事件，缺一不可。
var btn = document.getElementById("box");
//将回调存储在变量中
var fn = function(e){
alert("ok");
};
//绑定
btn.addEventListener("click", fn, false);
//解除
btn.removeEventListener("click", fn, false);
事件类型
鼠标事件mouse event
- 通过鼠标触发事件，类似用户的行为
| 属性 | 描述 |
|---|---|
| onclick | 单击鼠标时 |
| onblclick | 双击鼠标时 |
| ondrag | 拖动元素时 |
| ondragend | 拖动操作结束时 |
| ondragenter | 当元素被拖动至有效的拖放目标时 |
| ondragleave | 当元素离开有效拖放目标时 |
| ondragover | 当元素被拖动至有效拖放目标上方时 |
| ondragstart | 当拖动操作开始时 |
| ondrop | 当被拖动元素正在被拖放时 |
| onmousedown | 当按下鼠标按钮时 |
| onmousemove | 当鼠标指针移动时 |
| onmouseout | 当鼠标指针移出元素时 |
| onmouseover | 当鼠标指针移至元素之上时 |
| onmouseup | 当松开鼠标按钮时 |
| onmousewheel | 当转动鼠标滚轮时 |
| onscroll | 当滚动元素的滚动条时 |
键盘事件keyboard event
| 属性 | 描述 |
|---|---|
| onkeydown | 当按下按键时 |
| onkeypress | 当按下并松开按键时 |
| onkeyup | 当松开按键时 |
多媒体事件media event
- 通过视频（
videos），图像（images）或者音频（audio） 触发该事件，多应用于HTML媒体元素。
表单事件form event
- 表单事件在
HTML表单中触发 (适用于所有HTML元素, 但该HTML元素需在form表单内)。
窗口事件window event
- 由窗口触发该事件 (适用于
标签)。
其他事件
事件对象
切换图片小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="./img/meinv1.png" alt="" id="pic" width="500px" height="500px">
<button id="up">上一张</button>
<button id="down">下一张</button>
<script>
let pic = document.getElementById('pic')
let up = document.getElementById('up')
let down = document.getElementById('down')
let max = 4, min = 1
let now_pic = min
down.onclick = function () {
if (now_pic == max) {
now_pic = min
}
else {
now_pic++
}
pic.src = `./img/meinv${now_pic}.png`
}
up.onclick = function () {
if (now_pic == min) {
now_pic = max
}
else {
now_pic--
}
pic.src = `./img/meinv${now_pic}.png`
}
</script>
</body>
</html>
