이벤트 거품 중 두 개의 마우스 이벤트

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style type ="text/css">

        #divf {

         width:400px;

         border :1px solid #0094ff;

         height :300px;

        }

      #divs {

         width:300px;

         border :1px solid #0094ff;

         height :200px;

        }

    </style>

    <script src="Scripts/jquery-1.8.2.min.js"></script>

    <script type ="text/javascript">

        $(function () {

            //1.0 mouseenter         

            //2.0 mouseover         

            document.getElementById("divf").onclick = function (c) {

                alert("divf,   " + c + "  target=" + c.target + "currentTarget=" + c.currentTarget);

                //target            

                //currenttarget            

            };



            document.getElementById("divs").onclick = function (c) {

                alert("divs,   " + c+" target="+c.target+"currentTarget="+c.currentTarget);

                // c.stopPropagation();//      

              

                c.preventDefault();//         

            };

            $("div").click(function (e) {//   e     jquery  

                alert(this.id + e);

                // e.stopPropagation();//    

             //   e.preventDefault();//        

            });

        });

    </script>

</head>

<body>

   <div  id ="divf">

       <div id="divs"></div>

   </div>

</body>

</html>
이벤트 거품 중 두 개의 마우스 이벤트

좋은 웹페이지 즐겨찾기
