<body>
<div class="one"></div>
<script>
let one = document.querySelector('.one')
// 点击事件
one.onclick = function(){
console.log('点击事件');
}
// 双击事件
one.ondblclick = function(){
console.log('双击事件');
}
// 鼠标右键点击事件
one.oncontextmenu = function(){
console.log('鼠标右键点击事件');
}
// 鼠标进入事件(onmouseenter比onmouseover先执行)
one.onmouseenter = function(){
console.log('鼠标进入事件');
}
// 鼠标离开事件(onmouseleave比onmouseout先执行)
one.onmouseleave = function(){
console.log('鼠标离开事件');
}
// 鼠标进入事件2
one.onmouseover = function(){
console.log('鼠标进入事件onmouseover');
}
// 鼠标离开事件2
one.onmouseout = function(){
console.log('鼠标离开事件onmouseout');
}
// 注意：如果元素里面存在子元素，鼠标在元素中移动时会反复触发 onmouseover 和 onmouseout
// 鼠标移动事(所有的事件方法，都有一个默认的参数：事件对象)
one.onmousemove = function(){
console.log('鼠标正在移动');
}
// 鼠标按下事件
one.onmousedown = function(){
console.log('鼠标按下');
}
// 鼠标弹起
one.onmouseup = function(){
console.log('鼠标弹起');
}
</script>
</body>
