js 鼠标移除元素时触发 移到子元素 不会触发

    <div id="div1" style="width: 300px;height: 300px;background-color: aquamarine; padding-top: 20px;">
        <div style="width: 100px;height: 100px;background-color: white;margin-left: 20px;">

        </div>
    </div>

    <script>
        var t = document.getElementById("div1");
        //  mouseover mouseout：  在鼠标进入或者离开作用元素或者其子元素时，都会触发
 /*        t.addEventListener("mouseout", function () {
            console.log(11);
        }); */

        //mouseenter mouseleave：在鼠标移出作用元素的时候才会触发。
        t.addEventListener("mouseleave", function () {
            console.log(11);
        });