jQueryy原生js实现---hover事件

最新推荐文章于 2024-07-26 02:50:18 发布

miao淼

最新推荐文章于 2024-07-26 02:50:18 发布

阅读量1.3w

点赞数

分类专栏： jQuery源码学习文章标签： javascript html5 hover jquery 鼠标事件

本文链接：https://blog.csdn.net/wujimiao/article/details/78156701

版权

本文探讨了如何使用原生JavaScript实现jQuery的hover事件，通过onmouseover和onmouseout事件来模拟hover效果，并解决了在绝对定位情况下导致的事件连续触发问题，确保鼠标进入子级元素时不触发事件。

摘要由CSDN通过智能技术生成

jQuery常用鼠标事件之一，hover事件。相信大家对它很熟悉，对其原理也很熟悉。通常就是鼠标经过，鼠标离开事件的集合。我为了更好理解jQuery插件库，所以找一些常用方法用js实现，增强对js的理解。

根据上面分析，核心事件就是onmouseover和onmouseout。那么我们就看一下初步效果吧！

<div class="hover1">
        <div class="hover2">3</div>
        <div class="hover2">4</div>
    </div>
    <div class="odiv">1</div>
    <div class="odiv">2</div>

//jQuery原生js实现----hover事件


function hover(ele,over,out){
    ele.addEventListener('mouseover',over,false);
    ele.addEventListener('mouseout',out,false);
}

hover(document.querySelector('.hover1'),funct