Objective:
# 概念阐释
## 语义
除了`click` ，还有其他鼠标事件：
- `wheel`, 滑动鼠标滚轮
- mousedown：和click的区别是用户不需要释放按钮就能实现交互
- mouseup：只在用户释放按钮时有交互效果
- mouseover：鼠标悬浮，将触发mouseover事件
- mouseout：当鼠标离开一个元素时，将触发mouseout事件。
## 语法
```js
event.addEventListener('style',func);
```
# 实例
# 相关内容
鼠标事件一般都会在特定的元素上监听，[[js Events 事件监听 键盘事件]]需要在全文档`document`中监听。
# 问题
[练习题](https://www.codecademy.com/courses/build-interactive-websites/lessons/dom-events/exercises/mouse-events)用HTML&CSS&JS来写
🌟🌟
注意：reset重置按钮的写法
# 问题答案
```js
// These variables store the boxes on the side
let itemOne = document.getElementById('list-item-one');
let itemTwo = document.getElementById('list-item-two');
let itemThree = document.getElementById('list-item-three');
let itemFour = document.getElementById('list-item-four');
let itemFive = document.getElementById('list-item-five');
let resetButton = document.getElementById('reset-button');
// This function programs the "Reset" button to return the boxes to their default styles
let reset = function() {
itemOne.style.width = ''
itemTwo.style.backgroundColor = ''
itemThree.innerHTML = 'The mouse must leave the box to change the text'
itemFive.style.display = "none"
};
resetButton.onclick = reset;
// Write your code here
let increaseWidth = () => {
itemOne.style.width = '500px';
};
itemOne.addEventListener("mouseover",increaseWidth);
let changeBackground = () => {
itemTwo.style.backgroundColor = 'blue';
};
itemTwo.addEventListener("mouseup",changeBackground);
let changeText = () => {
itemThree.innerHTML = 'The mouse has left the element'
};
itemThree.addEventListener("mouseout",changeText);
let showItem = () => {
itemFive.style.display = 'block';
};
itemFour.addEventListener("mousedown",showItem);
```
# 参考资料