onmouseenter 和 onmouseleave是一对,
onmouseover 和 onmouseout 是一对
区别:
onmouseover/onmouseout 触发子元素的事件时,子元素通过事件冒泡触发父元素对应的事件; 可以通过阻止冒泡 stopPropagation() 避免父元素事件触发;
onmouseenter/onmouseleave 触发子元素事件时,不会触发父元素对应的事件,内部已经进行了阻止事件冒泡的处理;
结论: 一般我们会用 onmouseenter / onmouseleave 事件;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#outer {
background-color: red;
width: 300px;
height: 200px;
}
#inner {
background-color: yellowgreen;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id="outer">
outer
<div id="inner">inner</div>
</div>
<script>
/*
onmouseenter 和 onmouseleave是一对,
onmouseover 和 onmouseout 是一对
区别:onmouseover/onmouseout 触发子元素的事件时,子元素通过事件冒泡触发父元素对应的事件;
可以通过阻止冒泡 stopPropagation() 避免父元素事件触发;
onmouseenter/onmouseleave 触发子元素事件时,不会触发父元素对应的事件,内部已经进行了阻止事件冒泡的处理;
===>>>>>>一般我们会用 onmouseenter/onmouseleave事件;
*/
var outer = document.getElementById('outer')
var inner = document.getElementById('inner')
// onclick点击事件
// outer.onclick = function() {
// console.log('outer')
// }
// onclick点击子元素时,子元素会向上冒泡到父元素,导致父元素的事件触发,可以通过阻止冒泡来避免
// inner.onclick = function(e) {
// e.stopPropagation();
// console.log('inner')
// }
// onmouseover,onmouseout鼠标移入移出事件
// outer.onmouseover = function(e) {
// console.log('outer mouseover');
// }
// inner.onmouseover = function(e) {
// // e.stopPropagation();
// console.log('inner mouseover');
// }
// outer.onmouseout = function(e) {
// console.log('outer mouseout');
// }
// inner.onmouseout = function(e) {
// console.log('inner mouseout');
// }
// outer.onmouseenter = function(e) {
// console.log('outer mouseenter');
// }
// inner.onmouseenter = function(e) {
// console.log('inner mouseenter');
// }
// inner.onmouseleave = function(e) {
// console.log('inner mouseleave');
// }
// outer.onmouseleave = function(e) {
// console.log('outer leave');
// }
</script>
</body>
</html>