鼠标事件

①鼠标事件

  1. click：单击
  2. dblclick：双击
  3. mousedown：鼠标按下
  4. mouseup：鼠标抬起
  5. mouseover：鼠标悬浮
  6. mouseout：鼠标离开
  7. mousemove：鼠标移动
  8. mouseenter：鼠标进入
  9. mouseleave：鼠标离开
<button onclick="myClick()">鼠标单击</button> 
<button ondblclick="myDBClick()">鼠标双击</button> 
<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button> 
<button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button> 
<button onmousemove="myMouseMove()">鼠标移动</button> 
<button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button> 

<script> 
   function myClick() {  
       console.log("你单击了按钮！");  
   }  
   function myDBClick() {  
       console.log("你双击了按钮！");  
   }  
   function myMouseDown() {  
       console.log("鼠标按下了！");  
   }  
   function myMouseUp() {  
       console.log("鼠标抬起了！");  
   }  
   function myMouseOver() {  
       console.log("鼠标悬浮！");  
   }  
   function myMouseOut() {  
       console.log("鼠标离开！")  
   }  
   function myMouseMove() {  
       console.log("鼠标移动！")  
   }  
   function myMouseEnter() {  
       console.log("鼠标进入！")  
   }  
   function myMouseLeave() {  
       console.log("鼠标离开！")  
   }

 

②键盘事件：

  1. keydown：按键按下
  2. keyup：按键抬起
  3. keypress：按键按下抬起
<body> 
<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)"> 
</body>

 

 

<script>

/*输出输入的字符*/

function myKeyDown(id) {

console.log(document.getElementById(id).value);

}

/*按键结束，字体转换为大写*/

function myKeyUp(id) {

var text = document.getElementById(id).value;

document.getElementById(id).value = text.toUpperCase();

}

</script>

posted @ 2022-05-12 22:58  一土  阅读(82)  评论(0)    收藏  举报