窗口事件和表单事件

一：窗口事件

window.onfocus = function(){ // 窗口获取焦点事件};

window.onblur= function(){ // 窗口失去焦点事件};

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         window.onload=function () {
 8         var box=document.getElementById('box')
 9         console.log(box)
10         box.onclick=function () {
11             console.log("我被点击了")
12         }
13         }
14     </script>
15 </head>
16 <body>
17 <div id="box">dsfxvggdx</div>
18 </body>
19 </html>

二 ：表单事件

onblur：某元素失去活动焦点时产生该事件。例如鼠标在文本框中点击后又在文本框外点击时就会产生。

onfocus（ns3，ns4，ie3，ie4）网页上的元素获得焦点时产生该事件

onclick（ns3，ns4，ie3，ie4）单击网页上的某元素时产生

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

 

posted @ 2021-12-10 11:56  LLLLY  阅读(57)  评论(0)    收藏  举报