mouseover ,mouseout ,mouseenter,mouseleave区别

来源：互联网发布：淘宝怎么根据图片搜索编辑：程序博客网时间：2024/04/29 14:31

mouseover ,mouseout ,mouseenter,mouseleave，都是鼠标事件。mouseover ,mouseout 是一组，mouseenter,mouseleave是一组。mouseenter,mouseleave是将被选元素和其包含的子元素看成一个整体，就相当一个合成的大元素。鼠标进入这个合成的大元素时发生一次mouseenter，离开时发生一次mouseleave。如果某个元素添加了mouseover ,mouseout事件，其包含的元素都会添加mouseover ,mouseout事件，不论鼠标指针穿过被选元素或其子元素，都会触发mouseover ,mouseout事件。

实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <script src="http://www.jq22.com/jquery/1.9.1/jquery.min.js"></script>    <script>        $(function () {            $("#dd").on("mouseover", function () {                alert("mouseover");            });            $("#dd").on("mouseout ", function () {                alert("mouseout ");            });            $("#dd").on("mouseleave", function () {                alert("mouseleave");            });            $("#dd").on("mouseenter", function () {                alert("mouseenter");            });        })    </script></head><body><div id="dd" style="height: 100px ;width: 200px ;background-color: #459df5">    <div style="position: relative; left: 20px;background-color: #f55b72 ;height: 50px ;width: 70px;margin-left: 20px"></div>    <div style="background-color: #70f560 ;height: 150px ;width: 50px;margin-left: 20px;margin-top: -20px"></div></div></body></html>

、

0 0