事件参数对象下的几个属性 mouseenter与mouseover的区别

事件参数对象下的几个属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      div {
        width: 400px;
        height: 200px;
        background-color: yellow;
      }
      p {
        width: 100px;
        height: 20px;
        background-color: pink;
      }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
      // e.target这个属性得到的是触发该事件的目标对象,此时是一个DOM对象
      // e.currentTarget这个属性得到的是触发该事件的当前的对象
      // e.delegateTarget这个属性得到的是代理这个对象
      // $(function(){          
      //     // 事件参数对象
      //     $("#dv").click(function(e){
      //         // console.log("哈哈");
      //         // 得到的是触发该事件的目标对象
      //         console.log("div被点了");
      //         // console.log(e.target.id);
      //         console.log($(e.target).attr("id"));
      //     });

      //     $("p").click(function(){
      //         console.log("p被点击了");
      //         // return false;
      //     });
      // });

      $(function(){          
          // 事件参数对象
          $("#dv").click(function(e){
              console.log("div被点了");
              // console.log(e.currentTarget.id);
              // console.log($(e.currentTarget).attr("id"));
              // console.log(e);

              console.log(e.screenX + "====" + e.screenY);
          });

          $("p").click(function(){
              console.log("p被点了");
          });
      });

  </script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv">
  <p id="p1">这是一个p</p>
</div>
  
</body>
</html>

mouseenter与mouseover的区别

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
      x=0;
      y=0;
      $(document).ready(function(){
        $("div.over").mouseover(function(){
          $(".over span").text(x+=1);
        });
        $("div.enter").mouseenter(function(){
          $(".enter span").text(y+=1);
        });
      });
  </script>
</head>
<body>
  <p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
  <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
  <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
  <h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
  </div>
  <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
  <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
  </div>
</body>
</html>

事件参数对象下的几个属性 mouseenter与mouseover的区别

猜你喜欢