JavaScript 事件类型

2023-08-17T14:30:18.png

事件类型

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<style>

#yd{

background-color:red;
width:500px;
height:500px;

}

#yd1{

background-color:green;
width:500px;
height:500px;

}

#yd2{

background-color:blue;
width:500px;
height:500px;

}


#ddd{
  background-color:brown;
  height:1700px;
  width:700px;
}

</style>

</head>
<body>
  
<div id="ddd"></div>


  <button id="kkk">单击按钮事件</button>

  <button id="sss">双击按钮事件</button>


  <button id="s1">鼠标按下</button>

  <button id="s2">鼠标抬起</button>

<div id="yd"></div>

<div id="yd1"></div>
<div id="yd2"></div>







<script>


var kkk = document.getElementById("kkk");
var sss = document.getElementById("sss");
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");


var yd = document.getElementById("yd");
var yd1 = document.getElementById("yd1");
var yd2 = document.getElementById("yd2");



var body = document.getElementById("ddd");

kkk.onclick = function(){
  alert("单击事件");
};


sss.ondblclick = function(){
  alert("双击事件");
};



s1.onmousedown = function(){
  alert("鼠标按下");

};

s2.onmouseup = function(){
  alert("鼠标抬起");

};

yd.onmousemove = function(){
  alert("鼠标在元素上移动");
};








yd1.onmouseenter =  function(){
  alert("鼠标进入了");
};


yd2.onmouseleave = function(){
  alert("鼠标离开了");
};








body.onwheel = function(){

  console.log("鼠标滚动事件");
};










</script>


</body>
</html>

onwheel 事件
https://www.runoob.com/try/try.php?filename=tryjsref_onwheel_addeventlistener

两个鼠标进入和移出事件区别

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>


<style>
  .root{
    width:300px;
    height:500px;
    background-color:blueviolet;
  }
.box{
  width:100px;
  height:100px;
  background-color:red;
}


</style>

</head>


<body>


  
<div class="root">

<div class="box"></div>

</div>






  <script>


var root = document.getElementsByClassName("root")[0];
var box = document.getElementsByClassName("box")[0];

//进入root打印
/* root.onmouseenter = function(){
  console.log("鼠标进入了");
};

 */

//进入root打印，进入box也会打印
/* root.onmouseover = function(){
  console.log("鼠标进入了");
};
 */





//离开root打印
/* root.onmouseenter = function(){
  console.log("鼠标离开了");
};
 */



//离开root打印，离开box也会打印
/* root.onmouseout = function(){
  console.log("鼠标离开了");
};
 */






  </script>

</body>
</html>