20-移入移出事件区别

    let oFDiv = document.querySelector(".father");
    let oSDiv = document.querySelector(".son");

• 1. onmouseover和onmouseenter的区别

  • onmouseover: 移入到子元素,父元素的移入事件也会被触发

    oFDiv.onmouseover = function () {
        console.log("father");  // father
    };
    oSDiv.onmouseover = function () {
        console.log("son");  // son  father
    }
    

  • onmouseenter 移入到子元素,父元素的移入事件不会被触发

    oFDiv.onmouseenter = function () {
        console.log("father");  // father
    };
    oSDiv.onmouseenter = function () {
        console.log("son");  // son
    }
    

• 2. onmouseout和onmouseleave的区别

  • onmouseout 移出到子元素,父元素的移入事件也会被触发

    oFDiv.onmouseout = function () {
        console.log("father");  // father
    };
    oSDiv.onmouseout = function () {
        console.log("son");  // son father
    }
    

  • onmouseleave 移出到子元素,父元素的移入事件不会被触发

    oFDiv.onmouseleave = function () {
        console.log("father");  // father
    };
    oSDiv.onmouseleave = function () {
        console.log("son");  // son
    }