10-移入移出事件

    <style>
        div{
            width: 300px;
            height: 300px;
            background: red;
        }
    </style>

<div></div>

• 1. 移入事件

  • onmouseover

    let oDiv = document.querySelector("div");
    
    oDiv.onmouseover = function () {
        console.log("移入事件");
    }
    

  • 注意点: 对于初学者来说, 为了避免未知的一些BUG, 建议使用 onmouseenter

  • onmouseenter (推荐)

    let oDiv = document.querySelector("div");
    
    oDiv.onmouseenter = function () {
        console.log("移入事件");
    }
    

• 2. 移出事件

  • onmouseout

    let oDiv = document.querySelector("div");
    
    oDiv.onmouseout = function () {
        console.log("移出事件");
    }
    

  • 注意点: 对于初学者来说, 为了避免未知的一些BUG, 建议使用 onmouseleave

  • onmouseleave (推荐)

    let oDiv = document.querySelector("div");
    
    oDiv.onmouseleave = function () {
        console.log("移出事件");
    }
    

• 3. 移动事件

  • onmousemove

    oDiv.onmousemove = function () {
        console.log("移动事件");
    }