JS事件之onmouseover 、onmouseout 与onmouseenter 、onmouseleave

1、onmouseover、onmouseout:鼠标经过时自身触发事件,经过其子元素时也触发该事件;(父亲有的东西,儿子也有)

2、onmouseenter、onmouseleave:鼠标经过时自身触发事件,经过其子元素时不触发该事件。(父亲的东西就是父亲的,不归儿子所有)

这四个事件两两配对使用,onmouseover、onmouseout一对,onmouseenter、onmouseleave一对,不能混合使用。

下面来看例子:

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>*{            margin: 0;            padding: 0;        }        .f{            position: relative;            width: 200px;            height: 200px;            background-color: #56b829;        }        .son{            width: 100px;            height: 100px;            position: absolute;            left: 50%;            top: 50%;            margin-left: -50px;            margin-top: -50px;            background-color: red;        }</style></head><body><divclass="f"><divclass="son"></div></div><script>let f=document.getElementsByClassName('f')[0];    f.onmouseover=function (e) {        console.log('in',e.target);    }    f.onmouseout=function (e) {        console.log('out',e.target);    }</script></body></html>

我们先看下图再分析

1.gif

我们首先进入最外面的div,可以看到是父div触发了mouseover事件,接着进入子div,可以看到父div触发了mouseout事件,子div接着触发mouseover事件,然后我们从子div里面出来,可以看到子div触发了mouseout事件,父div触发了mouseover事件,接着我们移出鼠标,父div触发mouseout事件.如果不想子div去触发事件,则可以使用onmouseenter、onmouseleave。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>*{            margin: 0;            padding: 0;        }        .f{            position: relative;            width: 200px;            height: 200px;            background-color: #56b829;        }        .son{            width: 100px;            height: 100px;            position: absolute;            left: 50%;            top: 50%;            margin-left: -50px;            margin-top: -50px;            background-color: red;        }</style></head><body><divclass="f"><divclass="son"></div></div><script>let f=document.getElementsByClassName('f')[0];    f.onmouseenter=function (e) {        console.log('in',e.target);    }    f.onmouseleave=function (e) {        console.log('out',e.target);    }</script></body></html>

效果如下图

2.gif

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容