js 鼠标事件_移入移出

mouseover（移入） mouseout（移出）

mouseover
此事件类型冒泡，可能引起很多头痛的问题。例如，当鼠标指针移出Inner元素，事件将被发送到Inner元素，然后冒泡到Outer元素 。这可能会触发绑定的mouseover处理函数。
mouseout
此事件类型冒泡，可能引起很多头痛的问题。例如，当鼠标指针移出Inner元素，事件将被发送到Inner元素，然后冒泡到Outer元素 。这可能会触发绑定的mouseout处理函数。

$(".class").mouseover(function () {
   console.log("移入")
});
$(".class").mouseout(function () {
   console.log("移出")   
});
或
$(".class").on("mouseover",function () {
   console.log("移入")
});
$(".class").on("mouseout",function () {
   console.log("移出")   
});
或
// 为所有 .class 元素委托 mouseover 和 mouseout 事件
$("body").on({
    mouseover: function() {
        // 获取触发事件的元素的索引
        let index = $(this).index(".class");
        console.log("移入，索引:", index);
    },
    mouseout: function() {
        let index = $(this).index(".class");
        console.log("移出，索引:", index);
    }
}, ".class");

mouseenter（移入） mouseleave（移出）

mouseenter
此事件是Internet Explorer专有的。该事件在平时很有用，jQuery的模拟这一事件，可用于所有浏览器。该事件在鼠标移入到元素上时被触发。任何HTML元素都可以接受此事件。
mouseleave 
此事件是Internet Explorer专有的。该事件在平时很有用，jQuery的模拟这一事件，可用于所有浏览器。该事件在鼠标离开元素上时被触发。任何HTML元素都可以接受此事件。

$(".class").mouseenter(function () {
   console.log("移入")
});
$(".class").mouseleave(function () {
   console.log("移出")   
});
或
$(".class").on("mouseenter",function () {
   console.log("移入")
});
$(".class").on("mouseleave",function () {
   console.log("移出")   
});
或
// 为所有 .class 元素委托 mouseenter 和 mouseleave 事件
$("body").on({
    mouseenter: function() {
        // 获取触发事件的元素的索引
        let index = $(this).index(".class");
        console.log("移入，索引:", index);
    },
    mouseleave: function() {
        let index = $(this).index(".class");
        console.log("移出，索引:", index);
    }
}, ".class");