123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- #box {
- width: 300px;
- height: 300px;
- background: #ff0;
- }
- </style>
- </head>
- <body>
- <div id="box"></div>
- <input type="text">
- <script>
- var box = document.getElementById("box");
- var inp = document.querySelector("input");
- // 1.点击事件
- // box.onclick = function() {
- // console.log("点击");
- // }
- // 2.双击
- // box.ondblclick = function() {
- // console.log("双击")
- // }
- // 3.鼠标滑动
- // box.onmousemove = function(){
- // console.log("鼠标滑动")
- // }
- // 4.鼠标划出
- // box.onmouseout = function(){
- // console.log("鼠标划出")
- // }
- // 5.鼠标划入
- // box.onmouseover = function() {
- // console.log("鼠标划入")
- // }
- // 6.鼠标按下
- box.onmousedown = function() {
- console.log("鼠标按下")
- }
- // 7.鼠标抬起
- box.onmouseup = function(){
- console.log("鼠标抬起")
- }
- // 8.键盘按下
- inp.onkeydown = function(eve) {
- console.log("键盘按下",eve)
- if(eve.keyCode == 9) {
- console.log("按下tab")
- }
- }
- // 9.键盘抬起
- // inp.onkeyup = function() {
- // console.log("键盘抬起")
- // }
- // 10.键盘按下 回车键
- // inp.onkeypress = function() {
- // console.log("键盘按下")
- // }
- </script>
- </body>
- </html>
|