码迷,mamicode.com
首页 > Web开发 > 详细

JS学习记录(事件)

时间:2017-08-07 22:16:31      阅读:317      评论:0      收藏:0      [点我收藏+]

标签:onkeydown   str   onclick   his   upper   out   html   sed   element   

鼠标事件
<html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标事件</title> </head> <body> <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> </body> <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("鼠标离开!") } </script> </html>

结果图:根据按钮得到相应效果

 

键盘事件
<html lang="en"> <head> <meta charset="UTF-8"> <title>键盘事件</title> </head> <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> </html>

 

结果图:

技术分享

 

JS学习记录(事件)

标签:onkeydown   str   onclick   his   upper   out   html   sed   element   

原文地址:http://www.cnblogs.com/lizuowei/p/7301036.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!