1. 鼠标事件
mouseenter mouseleave (一对事件 鼠标的进入和离开) 不支持冒泡
mouseenter:鼠标从元素外部移到元素内部时触发。
mouseleave:鼠标从元素内部移到元素外部时触发。
这两个事件 a) 不冒泡,b) 鼠标经过子元素时不触发父元素的该事件。
mouseover mouseout (一对事件 鼠标的移入和移出 , 支持冒泡事件(所以子元素的该事件默认会触发父元素上的该事件;除非阻止冒泡);
mouseover:鼠标从元素外部移到元素内部时触发。
mouseout:鼠标从元素内部移到元素外部时触发。
这两个事件 a)冒泡,b) 鼠标经过子元素时也触发父元素的该事件。
ex: 比如鼠标从父元素移入到子元素会触发父元素的mouseout 触发子元素的mouseover 又因为冒泡会触发父元素的mouseover; 同时也是进入子元素,所以会触发 子元素的mouseenter;
但是此时鼠标并未离开父元素; 所以不会触发父元素的mouseleave )
总结: 父mouseout -> 子mouseover -> 父mouseover -> 子mouseenter
鼠标从子元素移出; 移入父元素 : 首先会触发子元素的mouseout , 因为冒泡所以触发父元素的mouseout; 又因为离开了子元素 所以触发子元素的mouseleave; 移入并进入父元素, 触发 父元素的mouseover
总结: 子mouseout -> 父mouseout -> 子mouseleave -> 父mouseover
mousedown (鼠标左右任意键按下) 默认冒泡
mmouseup( 鼠标左右任意键抬起) 默认冒泡
click (鼠标左键按下 mousedown -> mouseup -> click) 默认冒泡
dblclick(注意,是 dbl) 默认冒泡
mousemove 是如果鼠标移动操作实时响应事件, 比如鼠标拖动一个元素 默认冒泡
mousewheel 鼠标滚轮事件
2. 鼠标事件代码
<style>
* {
margin: 0;
padding: 0;
}
div {
/* position: relative; */
margin-top: 50px;
margin-left: 50px;
width: 300px;
height: 400px;
display: flex;
flex-wrap: wrap;
background-color: aquamarine;
}
a {
/* position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
display: block;
width: 100px;
height: 100px;
border: 5px solid #000;
padding: 5px;
background-color: brown;
margin-left: 50px;
display: flex;
}
.a1 {
margin-top: 40px;
}
.a2 {
margin-top: 70px;
background-color: aquamarine;
}
em {
position: absolute;
top: 5000px;
}
</style>
<body>
<div onmouseover="mouseoverfather()" onmouseout="mouseoutfather()" onmouseenter="mouseenterfather()"
onmouseleave="mouseleavefather()" onmousedown="mousedownfather()"
onmouseup="mouseupfather()"
onmousemove="mousemovefather()"
onclick="mouseclickfather()"
>
father
<a class="a1" href="javascript:;" onmouseover="mouseoverson()" onmouseout="mouseoutson()"
onmouseenter="mouseenterson()" onmouseleave="mouseleaveson()"
onmousedown="mousedownson1()"
onmouseup="mouseupson1()"
onclick="mouseclickson1()"
onmousemove="mousemoveson1()">son1</a>
<a class="a2" href="javascript:;" onmouseover="mouseoverson2()" onmouseout="mouseoutson2()"
onmouseenter="mouseenterson2()" onmouseleave="mouseleaveson2()">son2</a>
</div>
</body>
<script>
function mouseoverfather() {
console.log('父元素触发mouseoverfather')
}
function mouseoutfather() {
console.log('父元素触发mouseoutfather')
}
function mouseenterfather() {
console.log('父元素触发mouseenterfather')
}
function mouseleavefather() {
console.log('父元素触发mouseleavefather')
}
// 父元素鼠标点击事件====================
function mousedownfather() {
console.log('父元素触发mousedownfather')
}
function mouseupfather() {
console.log('父元素触发mouseupfather')
}
function mouseclickfather() {
console.log('父元素触发mouseclickfather')
}
// 父元素鼠标点击事件====================
function mousemovefather() { // 滑动
console.log('父元素触发mousemovefather')
}
function mouseoverson() {
console.log('11子元素触发mouseoverson')
}
function mouseoutson() {
console.log('11子元素触发mouseoutson')
}
function mouseenterson() {
console.log('11子元素触发mouseenterson')
}
// 鼠标点击事件====================
function mouseleaveson() {
console.log('11子元素触发mouseleaveson')
}
// 子元素鼠标点击事件====================
// 11子元素触发mousedownson1
// mouse.html:126 11子元素触发mouseupson1
// mouse.html:129 11子元素触发mouseclickson1
// 因为冒泡 同时也会触发父元素的mousedown mouseup click
function mousedownson1() {
console.log('11子元素触发mousedownson1')
}
function mouseupson1() {
console.log('11子元素触发mouseupson1')
}
function mouseclickson1() {
console.log('11子元素触发mouseclickson1')
}
// 子元素鼠标点击事件====================
function mousemoveson1(){
console.log('11子元素触发mousemoveson1')
}
function mouseoverson2() {
console.log('22子元素触发mouseoverson2')
}
function mouseoutson2() {
console.log('22子元素触发mouseoutson2')
}
function mouseenterson2() {
console.log('22子元素触发mouseenterson2')
}
function mouseleaveson2() {
console.log('22子元素触发mouseleaveson2')
}
</script>
// 对于鼠标的移进移出
// 1:father 触发 mouseover 和 mouseenter;
// 打印:
// 父元素触发mouseoverfather
// 父元素触发mouseenterfather
// 2: father 触发 mouseover(因为冒泡) 和 mouseenter; son1 触发mouseover 和 mouseenter
// 打印:
// 父元素触发mouseoutfather
// 11子元素触发mouseoverson
// 父元素触发mouseoverfather
// 11子元素触发mouseenterson
// 3. father 触发mouseout(因为冒泡) 和 mouseover;son1 触发mouseout 和 mouseleave
// 打印:
// 11子元素触发mouseoutson
// 父元素触发mouseoutfather
// 11子元素触发mouseleaveson
// 父元素触发mouseoverfather
// 4 同理2 5同理3
// 6: father 触发 mouseout 和 mouseleave
// 打印:
// 父元素触发mouseoutfather
// 父元素触发mouseleavefather