JS 事件

JS的事件

1.鼠标事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <style>
 9 
10     </style>
11 </head>
12 <body>
15 </body>
16 </html>
17 <script>
24     btns[0].onmousedown=function(){
25         console.log('按下鼠标')
26     }    
27     //onmousedown按下鼠标执行
28 
29     btns[0].onmouseup=function(){
30         console.log('抬起鼠标')
31     }    
32     //onmouseup抬起鼠标执行
33 
34     btns[0].onmousemove=function(){
35         console.log('鼠标移动')
36     }    
37     //onmousemove鼠标在上面移动执行
38 
39     btns[0].onmouseenter=function(){
40         btns[0].style.color='red';
41     }    
42     //鼠标进入时的变化
43 
44     btns[0].onmouseover=function(){
45         console.log('鼠标进入')
46     }    
47     //鼠标进入时执行
48 
49     btns[0].onmouseout=function(){
50         console.log('鼠标移出')
51     } 
52     //鼠标移出时执行
53 
54     btns[0].onmousewheel=function(){
55         console.log('鼠标滚轮')
56     } 
57     //在上面滚动鼠标执行
58 
59     btns[0].ondblclick=function(){
60         console.log('鼠标双击')
61     } 
62     //双击鼠标执行
63 </script>

2.键盘事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     
11 </body>
12 </html>
13 <script>
14     document.onkeydown=function(event){
15         console.log(event.keyCode)
16     }
17 
18 
19     document.onkeyup=function(event){
20         console.log(event)
21     }
22 
23     document.onkeypress=function(event){
24         console.log(event)
25     }
26     // 除了功能键以外
27     // 回车的键值是13
28 </script>

3.窗口事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <div id="box">点我</div>
11 </body>
12 </html>
13 <script>
14     window.onload=function(){
15         var box=document.getElementById('box')
16         console.log(box)
17         box.onclick=function(){
18             console.log("我被点击了")
19         }
20     }
21 
22 
23 
24     // var box=document.getElementById('box')
25     // box.onclick=function(){
26     //     console.log('我被点击了')
27     // }
28    
29 </script>

4.表单事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <style>
 9 
10     </style>
11 </head>
12 <body>
13     <form action="">
14         <label for="account">
15             <input type="text" id="account" name="account">
16         </label>
17         <span id="accountSpan">请输入正确手机号</span>
18         <label for="password">
19             <input type="password" id="password" name="password">
20         </label>
21         <input type="submit">
22     </form>
23 </body>
24 </html>
25 <script>
26     var account=document.getElementById('account')
27     var accountSpan=document.getElementById('accountSpan')
28     account.onblur=function(){
29         accountSpan.style.display='inline'
30     }
31     account.onfocus=function(){
32         accountSpan.style.display='none'
33     }
34     
35 </script>

 

posted @ 2021-11-29 10:18  Adinsclay  阅读(52)  评论(0)    收藏  举报