什么是鼠标事件？

最新推荐文章于 2023-01-30 15:18:07 发布

盗梦123

最新推荐文章于 2023-01-30 15:18:07 发布

阅读量644

点赞数

分类专栏：笔记前端文章标签： html

本文链接：https://blog.csdn.net/m0_50272558/article/details/108585790

版权

前端同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

笔记

29 篇文章 0 订阅

订阅专栏

事件

事件源
1.鼠标单击事件：onclick
2.鼠标双击事件：ondblclick
3.鼠标移入/离开（onmouseenter/onmouseleave）

事件源

1.鼠标单击事件：onclick

<body>
 <p id="p1" onclick="fun()">单机事件测试</p>
</body>
<script type="text/javascript">
 function fun(){
  //获取指定元素
  var p1 = document.getElementById("p1");
  p1.innerText="我被单击了!"
  p1.style.fontSize="90px";
  p1.style.color="blue";
 }
</script>

2.鼠标双击事件：ondblclick

<style type="text/css">
  #div1{
   width: 100px;
   height: 100px;
   background-color: skyblue;
  }
 </style>
</head>
<body>
 <div id="div1" onclick="zoomout()" ondblclick="zoomin()"></div>
</body>
<script type="text/javascript">
 function zoomout(){
  var div1 = document.getElementById("div1");
  div1.style.width="200px";
  div1.style.height="200px";
  div1.style.backgroundColor="red";
 }
 function zoomin(){
  var div1 = document.getElementById("div1");
  div1.style.height="300px";
  div1.style.width="300px";
  div1.style.backgroundColor="yellowgreen";
 }
</script>

3.鼠标按下和抬起（onmousedown / onmouseup）

<style type="text/css">
   #div1{
    width: 100px;
    height: 100px;
    background-color: black;
   }
  </style>
 </head>
 <body>
  <div id="div1" onmousedown="zoomout()" onmouseup="zoomin()"></div>
 </body>
 <script type="text/javascript">
  function zoomout() {
  var div1 = document.getElementById("div1");
  div1.style.width = "200px";
  div1.style.height = "200px";
  div1.style.backgroundColor="yellowgreen";
  }
  function zoomin() {
  var div1 = document.getElementById("div1");
  div1.style.width = "100px";
  div1.style.height = "100px";
  div1.style.backgroundColor="black";
  }
 </script>

3.鼠标移入/离开（onmouseenter/onmouseleave）

<style type="text/css">
  #div1{
   width: 100px;
   height: 100px;
   background-color: black;
  }
 </style>
</head>
<body>
 <div id="div1" onmouseenter="zoomout()" onmouseleave="zoomin()"
  onmousedown="zoomon" onmouseup="zomout"
   onclick="zoomr()" ondblclick="zoomt()"></div>
</body>
<script type="text/javascript">
 function zoomout() {
 var div1 = document.getElementById("div1");
 div1.style.width = "100px";
 div1.style.height = "100px";
 div1.style.backgroundColor="red";
 }
 function zoomin() {
 var div1 = document.getElementById("div1");
 div1.style.width = "200px";
 div1.style.height = "200px";
 div1.style.backgroundColor="yellow";
 }
 function zoomon() {
 var div1 = document.getElementById("div1");
 div1.style.width = "300px";
 div1.style.height = "300px";
 div1.style.backgroundColor="green";
 }
 function zomout() {
 var div1 = document.getElementById("div1");
 div1.style.width = "400px";
 div1.style.height = "400px";
 div1.style.backgroundColor="blue";
 }
 function zoomr() {
 var div1 = document.getElementById("div1");
 div1.style.width = "500px";
 div1.style.height = "500px";
 div1.style.backgroundColor="purple";
 }
  
 function zoomt() {
 var div1 = document.getElementById("div1");
 div1.style.width = "600px";
 div1.style.height = "600px";
 div1.style.backgroundColor="seagreen";
  }
</script>

盗梦123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
什么是鼠标事件？

@事件事件源1.鼠标单击事件：onclick2.鼠标双击事件：ondblclick3.鼠标移入/离开（onmouseenter/onmouseleave）事件源1.鼠标单击事件：onclick<body> <p id="p1" onclick="fun()">单机事件测试</p></body><script type="text/javascript"> function fun(){ //获取指定元素 var p1
复制链接

扫一扫