JavaScript中onmouseover,onmouseout和onmouseenter,onmouseleave的区别

JavaScript中onmouseover,onmouseout和onmouseenter,onmouseleave的区别

onmouseover,onmouseout和onmouseenter,onmouseleave这两组都是鼠标的移入与移出的事件

它们的主要区别在于onmouseenter,onmouseleave这一组默认没有冒泡
事件冒泡：当子元素的某个事件被触发时，会依次向上触发所有父元素的相同事件，这种现象叫事件冒泡
下面先拿onmouseover和onmouseenter来进行比较

	<!--html部分-->
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>

/*css部分*/
.box1{width: 300px;height: 300px;background: orangered;}
.box2{width: 200px;height: 200px;background: pink;}
.box3{width: 100px;height: 100px;background: royalblue;}

//js部分
	var obox1 = document.querySelector("#box1")
    var obox2 = document.querySelector("#box2")
    var obox3 = document.querySelector("#box3")

    obox1.onmouseover = function(eve){
        var e = eve || window.event;
		console.log("橙色div")
    }
    obox2.onmouseover = function(eve){
        var e = eve || window.event;		
		console.log("粉色div")
    }
    obox3.onmouseover = function(eve){
        var e = eve || window.event;		
        console.log("蓝色div")
    }
    document.onmouseover = function(){
        console.log("document")
    } 

当我们将鼠标移入最里面的蓝色div时，在控制台中将会依次打印蓝色div、粉色div、橙色div、document，这种现象就是冒泡
但是当我们把onmouseover换为onmouseenter时

	obox1.onmouseenter = function(eve){
       var e = eve || window.event;
		console.log("橙色div")
    }
    obox2.onmouseenter = function(eve){
        var e = eve || window.event;		
		console.log("粉色div")
    }
    obox3.onmouseenter = function(eve){
        var e = eve || window.event;		
        console.log("蓝色div")
    }
    document.onmouseenter = function(){
        console.log("document")
    } 

当我们将鼠标移入最里面的蓝色div时，在控制台中只打印了蓝色div.
以上就是onmouseenter和onmouseout的主要区别，onmouseout和onmouseleave也同理。