1.onclick鼠标点击事件:
<!DOCTYPE html>
<html>
<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>鼠标相关事件</title>
<style>
.one{
width: 200px;
height: 200px;
background-color: lightblue;
}
.two{
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
</div>
<script>
// 获取元素
let one = document.querySelector('.one')
// 点击事件
one.onclick = function(){
console.log('我被点击了...');
}
</script>
</body>
</html>
2.ondblclick鼠标双击事件: 注意:如果添加了点击事件,会先触发点击事件,再触发双击事件
<!DOCTYPE html>
<html>
<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>鼠标相关事件</title>
<style>
.one{
width: 200px;
height: 200px;
background-color: lightblue;
}
.two{
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
</div>
<script>
// 获取元素
let one = document.querySelector('.one')
// 双击事件
one.ondblclick = function(){
console.log('我被双击了...');
}
</script>
</body>
</html>
3.oncontextmenu鼠标右击事件
<!DOCTYPE html>
<html>
<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>鼠标相关事件</title>
<style>
.one{
width: 200px;
height: 200px;
background-color: lightblue;
}
.two{
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
</div>
<script>
// 获取元素
let one = document.querySelector('.one')
one.oncontextmenu = function(e){
// 事件方法里面可以传一个参数,该参数是事件对象
// 通过事件对象的preventDefault()方法,可以阻止默认行为
// 因为在浏览器中,鼠标右键会默认打开浏览器的快捷菜单。
e.preventDefault()
console.log('右键点击事件...');
}
</script>
</body>
</html>
4.onmouseover鼠标进入事件
<!DOCTYPE html>
<html>
<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>鼠标相关事件</title>
<style>
.one{
width: 200px;
height: 200px;
background-color: lightblue;
}
.two{
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
</div>
<script>
// 获取元素
let one = document.querySelector('.one')
one.onmouseover = function(){
console.log('over鼠标进入了...');
}
</script>
</body>
</html>
5.onmouseout鼠标离开事件:
<!DOCTYPE html>
<html>
<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>鼠标相关事件</title>
<style>
.one{
width: 200px;
height: 200px;
background-color: lightblue;
}
.two{
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
</div>
<script>
// 获取元素
let one = document.querySelector('.one')
one.onmouseout = function(){
console.log('out鼠标离开了...');
}
</script>
</body>
</html>
6.onmouseenter:鼠标进入事件 ,onmouseleave:鼠标离开事件。注意:onmouseenter 和 onmouseleave 不会作用给子元素。onmouseover 和 onmouseout 会作用给子元素