.box1{
width: 100px;
height: 100px;
background-color: cadetblue;
}
.box2{
width: 100px;
height: 100px;
background-color: rgb(56, 28, 147);
}
.box3{
width: 100px;
height: 100px;
background-color: rgb(225, 189, 28);
}
.box4{
width: 100px;
height: 100px;
background-color: rgb(28, 147, 105);
}
.box5{
width: 100px;
height: 100px;
background-color: rgb(130, 130, 130);
}
<button id="btn1">点击</button>
<button id="btn2">双击</button>
<button id="btn3">鼠标按下</button>
<button id="btn4">鼠标抬起</button>
<div class="box1" id="btn5"></div>
<div class="box2" id="btn6"></div>
<div class="box3" id="btn7"></div>
<div class="box4" id="btn8"></div>
<div class="box5" id="btn9"></div>
var btn1=document.getElementById("btn1")
var btn2=document.getElementById("btn2")
var btn3=document.getElementById("btn3")
var btn4=document.getElementById("btn4")
var btn5=document.getElementById("btn5")
var btn6=document.getElementById("btn6")
var btn7=document.getElementById("btn7")
var btn8=document.getElementById("btn8")
var btn9=document.getElementById("btn9")
btn1.onclick = function(){
console.log("单击事件");
}
btn2.onblclick = function(){
console.log("双击事件");
}
btn3.onmousedown = function(){
console.log("鼠标按下");
}
btn4.onmouseup = function(){
console.log("鼠标抬起");
}
btn5.onmousemove =function(){
console.log("鼠标移动了");
}
btn6.onmouseenter =function(){
console.log("鼠标进入事件");
}
btn7.onmouseleave =function(){
console.log("鼠标离开事件");
}
btn8.onmouseover =function(){
console.log("鼠标进入事件");
}
btn9.onmouseout =function(){
console.log("鼠标离开事件");
}
mouseenter、mouseleave和onmouseover、mouseout区别:
如果同时存在父元素与子元素,并在父元素上添加函数,后面两个当鼠标移动到子元素和父元素都会控制台打印,前面两个则不会。