1. Commonly used mouse events
| type | event |
| click | Occurs when the left button of the single mouse is pressed, and does not occur if the right button is also pressed |
| dbclick | Occurs when the left mouse button is double-clicked, not if the right button is also pressed |
| mousedown | Occurs when either mouse button is clicked |
| mouseover | Occurs when the mouse pointer is over an element and the bounds of the element are about to be removed |
| mouseout | Occurs when the mouse pointer moves out of one element and onto another |
| mouseup | Occurs when either mouse button is released |
| mousemove | Occurs continuously while the mouse is over an element |
2. Mouse click event
Mouse click events include click (click), dbclick (double click), mousedown (press) and mouseup (release). Among them, the click event is more commonly used, and the mousedown and mouseup event types are mostly used in mouse release and stretch operations. When these event handlers return false, the default behavior of the bound object is disabled.
Examples are as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div')
// 鼠标点击盒子变粉
div.addEventListener('click',function(){
this.style.background = 'pink'
})
</script>
</body>
</html>3. Mouse over event
Mouse over includes two event types, move in and move out. The mouseover event is fired when the mouse pointer is moved over an element. And when the mouse pointer is moved out of an element, the mouseout event will be triggered. If you move from a parent element to a child element, the element's mouseover event type is also triggered.
Examples are as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div')
// 鼠标移入盒子变粉
div.addEventListener('mouseover', function () {
this.style.background = 'pink'
})
// 鼠标移出盒子变黑
div.addEventListener('mouseout', function () {
this.style.background = 'black'
})
</script>
</body>
</html>Fourth, the mouse movement event
The mousemove event type is a real-time response event. When the position of the mouse pointer changes (moves at least one pixel), the mousemove event will be triggered. The sensitivity of this event response mainly refers to the moving speed of the mouse pointer and the speed of the browser tracking update.
Examples are as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div')
// // 鼠标在盒子内移动后盒子变粉
div.addEventListener('mousemove', function () {
this.style.background = 'pink'
})
</script>
</body>
</html>