欢迎光临
我的个人博客网站

WEB前端第三十二课——js事件处理-文档、焦点

1.文档事件

  主要是指添加给整个文档的事件,文档事件中,绝大部分不需要用户触发调用,而是通过文档的不同状态进行自动执行

  主要事件:

    ① load / error,加载成功/失败事件

    ② DOMContentLoaded,当DOM加载完成时触发事件

    ③ beforeunload,页面(文档)发生卸载时触发事件

    ④ readystatechange,文档加载状态判断事件

    ⑤ resize,文档大小发生改变时的回调事件

2.load / error

  load事件在节点加载成功时自动触发

  error时间在节点加载失败时自动触发

  语法:元素/文档(node).onload / onerror = function(){ };

<body>     <img src="Images/Model.jpg" alt=""> <script>     var img=document.querySelector('img');     img.onload=function () {         console.log('图片加载成功!');     }     img.onerror=function () {         console.log('图片加载Failed!');     } </script> 

3.DOMContentLoaded

  与 load事件的区别是触发时机不一样,先触发DOMContentLoaded事件,后触发 load事件

  DOM文档加载的步骤:

    ① 解析HTML结构

    ② 加载外部脚本和样式表文件

    ③ 解析并执行脚本代码

    ④ DOM树构建完成  ——☛触发DOMContentLoaded事件执行

    ⑤ 加载图片等外部文件

    ⑥ 页面加载完成  ——☛触发load事件执行

  由此看出,样式文件的加载会阻塞脚本执行

  即,如果把一个内部脚本 <script>元素放在了一个 <link>后面,在页面没有完成解析时脚本不会触发执行,直至样式文件加载完成之后。

  注意,DOMContentLoaded事件只能使用DOM2方式绑定,不存在DOM0绑定方式!

4.beforeunload

  页面发生卸载时触发事件(页面刷新和关闭页面之前),通常情况下配合 event .returnValue使用

  一般情况下都是直接添加到body上面,如果没有在body上添加本事件,则需要在 window上添加

  语法示例:window .onbeforeunload=function(){

        event .returnValue=”;

        return’信息已修改是否确认离开?’

       };

  注意,beforeunload事件中弹出的对话框一般情况下不允许用户修改,只能采用默认对话框,且在beforeunload关联的回调函数中也不支持alert弹出框

5.readystatechange

  当 document的 readyState改变时触发这个事件(仅第二阶段)

  document .readyState的三个属性值:

    loading,加载DOM中

    interactive,加载外部资源

    complete,加载完成

  而 readystatechange事件正是这个状态发生改变时调用的事件

  调用方式可以是 DOM0级事件,也可以是DOM2级事件

6.事件测试

<html lang="en"> <head>     <meta charset="UTF-8">     <title>文档事件</title> <style>     img{ width: 300px; } </style> </head> <body>     <img src="Images/Model.jpg" alt=""> <script>     var img=document.querySelector('img');     img.onload=function () {         console.log('图片加载成功!');     }     img.onerror=function () {         console.log('图片加载Failed!');     }     console.log('页面加载状态:'+document.readyState);     document.addEventListener('readystatechange',function () {         console.log('页面加载状态变化:'+document.readyState);     });     document.addEventListener('DOMContentLoaded',function () {         console.log('文档DOM树构建完成');     });     window.onload=function () {         console.log('浏览器窗口加载完成!')     } </script> </body> </html> 

  WEB前端第三十二课——js事件处理-文档、焦点

7.resize

  浏览器窗口变化事件

<script>     window.onresize=function(){         console.log('width:'+document.documentElement.clientWidth);         console.log('height:'+document.documentElement.clientHeight);     } </script> 

  WEB前端第三十二课——js事件处理-文档、焦点

    js中为了追求变化的敏感度,将 resize事件的响应时间设置为了0,也就是说每一次的文档大小改变都会立即调用本事件

  这就造成了 一次变化 却发生了 不止一次 的resize事件调用

  为了解决这个问题可以采用一种延迟的写法来实现。代码如下:

<script>     var flag=true     window.onresize=function(){         var w=document.documentElement.clientWidth;         var h=document.documentElement.clientHeight;         if (flag==true){             console.log('(w,h):('+w+','+h+')');              flag=false;             setTimeout(function () {                 flag=true;             },1000);         }     } </script> 

  WEB前端第三十二课——js事件处理-文档、焦点

 8.焦点事件

  在js中当前正在和用户发生交互的节点称为焦点,包括获取焦点(focus)和失去焦点(blur)两种情况

  获取焦点和失去焦点都既可以使用DOM0绑定也可以使用DOM2绑定,自动触发事件执行

  语法:元素节点 .onfocus / onblur = function(){ };

  注意,这两种事件均不支持事件冒泡,只有当前节点触发调用

     如果需要传递触发,则需要使用DOM2绑定事件中的捕获方式

  事件本身的书写格式:元素节点 .focus()  / blur(); ,(方法)代表获取焦点 / 失去焦点

<body>     Name:<input type="text" class="name">     Code:<input type="text" class="code"> <script>     var code=document.querySelector('.code');     code.onfocus=function(){         code.setAttribute('placeholder','请设置6位数密码!');     };     code.onblur=function(){         if (code.length!==6){             code.setAttribute('style','border:1px solid red');             alert('密码格式不符合要求,请重新设置。');  //先于setAttrbute执行         };     }; </script> </body> 

9.用户注册界面

<html lang="en"> <head>     <meta charset="UTF-8">     <title>用户注册界面</title>     <style>         input{             display: inline-block;             outline: none;             height: 20px;             line-height: 30px;         }         .boxName{             display: inline-block;             padding: 0;             width: 80px;         }         .submit{             display: inline-block;             margin-left: 60px;         }         .borderGreen{             border: 2px solid darkgreen;         }         .fontGreen{             color: darkgreen;             font-weight: bold;         }         .borderRed{             border: 2px solid red;         }         .fontRed{             color: red;         }         .idtCodePic{             width: 177px;             height: 50px;             line-height: 50px;             text-align: center;             /*word-spacing: 20px;          对函数返回结果无效*/             background-image: url("Images/idtCodePic.jpg");             margin-left: 85px;             font-size: 30px;         }         .idtCodePic:hover{             cursor: pointer;         }     </style> </head> <body>     <p>         <span class="boxName">用户名:</span>         <input type="text" class="userName">         <span class="nameTips"></span>     </p>     <p>         <span class="boxName">手机号码:</span>         <input type="text" class="phoneNumber"/>         <span class="phoneTips"></span>     </p>     <p>         <span class="boxName">登录密码:</span>         <input type="text" class="loginCode">         <span class="loginTips"></span>     </p>     <p>         <span class="boxName">确认密码:</span>         <input type="text" class="confirmCode"/>         <span class="confirmTips"></span>     </p>     <span style="font-size: 12px;color: #b3d4fc;float: left;     width: 25px;height: 50px;margin-left: 50px">点击图片切换</span>     <div class="idtCodePic"></div>     <p>         <span class="boxName">验证码:</span>         <input type="text" class="idtCode"/>         <span class="idtTips"></span>     </p>      <button class="submit" disabled>提交注册</button> <script>     var userName=document.querySelector('.userName');  //name不能作为变量声明!     var nameTips=document.querySelector('.nameTips');     var phoneNumber=document.querySelector('.phoneNumber');     var phoneTips=document.querySelector('.phoneTips');     var loginCode=document.querySelector('.loginCode');     var loginTips=document.querySelector('.loginTips');     var confirmCode=document.querySelector('.confirmCode');     var confirmTips=document.querySelector('.confirmTips');     var idtCodePic=document.querySelector('.idtCodePic');     var idtCode=document.querySelector('.idtCode');     var idtTips=document.querySelector('.idtTips');     var submit=document.querySelector('.submit'); //    用户名内容设置     userName.onfocus=function(){         userName.setAttribute('placeholder','不少于两位字符!');     };     userName.onblur=function(){         if (userName.value.length>=3){             nameTips.innerHTML='通过';             nameTips.setAttribute('class','fontGreen');             userName.setAttribute('class','borderGreen');         }else{             nameTips.innerHTML='格式不符合要求,请重新填写';             nameTips.setAttribute('class','fontRed');             userName.setAttribute('class','borderRed');         }         checkAllInfo();     }; //    手机号码内容设置     phoneNumber.onfocus=function(){         phoneNumber.setAttribute('placeholder','请填写11位手机号码!');     };     phoneNumber.onblur=function(){         if (phoneNumber.value.length==11&&phoneNumber.value[0]==1){             phoneTips.innerHTML='通过';             phoneTips.setAttribute('class','fontGreen');             phoneNumber.setAttribute('class','borderGreen');         }else{             phoneTips.innerHTML='格式不符合要求,请重新填写';             phoneTips.setAttribute('class','fontRed');             phoneNumber.setAttribute('class','borderRed');         }         checkAllInfo();     }; //    登录密码内容设置     loginCode.onfocus=function(){         loginCode.setAttribute('placeholder','请设置6~12位数字或字母!');     };     loginCode.onblur=function(){         if (loginCode.value.length>=6&&loginCode.value.length<=12){             loginCode.setAttribute('class','borderGreen');             loginTips.innerHTML='通过';             loginTips.setAttribute('class','fontGreen');         }else{             loginCode.setAttribute('class','borderRed');             loginTips.innerHTML='密码格式不符合要求,请重新设置';             loginTips.setAttribute('class','fontRed');         }         checkAllInfo();     }; //    确认密码内容设置     confirmCode.onfocus=function(){         confirmCode.setAttribute('placeholder','请确认上述密码!');     };     confirmCode.onblur=function(){         if (confirmCode.value==loginCode.value&&confirmCode.value!=''){             confirmCode.setAttribute('class','borderGreen');             confirmTips.innerHTML='通过';             confirmTips.setAttribute('class','fontGreen');         }else{             confirmCode.setAttribute('class','borderRed');             confirmTips.innerHTML='密码不符合要求,请重新确认';             confirmTips.setAttribute('class','fontRed');         }         checkAllInfo();     }; //    验证码图片内容设置     function creatIdtCode() {         var idtCodeSet='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';         var maxNum=idtCodeSet.length;         var idtCodeVal='';         for (var i=0;i<5;i++){             var index=Math.floor(Math.random()*maxNum);             var idtCodeTemp=idtCodeSet[index];             idtCodeVal+=idtCodeTemp;         }         return idtCodeVal;     }     idtCodePic.innerHTML=creatIdtCode();     idtCodePic.onclick=function(){         var newIdtCode=creatIdtCode();         console.log(newIdtCode);         idtCodePic.innerHTML=newIdtCode;     };     idtCodePic.setAttribute('word-spacing','20px'); //    验证码内容设置     idtCode.onfocus=function(){         idtCode.setAttribute('placeholder','请输入上述图片内验证码!');     };     idtCode.onblur=function(){         if (idtCode.value==idtCodePic.innerHTML){             idtCode.setAttribute('class','borderGreen');             idtTips.innerHTML='通过';             idtTips.setAttribute('class','fontGreen');         }else{             idtCode.setAttribute('class','borderRed');             idtTips.innerHTML='验证码错误,请重新填写';             idtTips.setAttribute('class','fontRed');         }         checkAllInfo();     }; //    提交注册按钮设置     function checkAllInfo(){         if (nameTips.innerHTML=='通过'&&phoneTips.innerHTML=='通过'&&loginTips.innerHTML=='通过'             &&confirmTips.innerHTML=='通过'&&idtTips.innerHTML=='通过'){             submit.removeAttribute('disabled');         }else {             submit.setAttribute('disabled','disabled');         }     } </script> </body> </html> 

    WEB前端第三十二课——js事件处理-文档、焦点

 

 

 10.滚动事件

  scroll事件会在文档或元素发生滚动操作时触发

  ① 文档滚动事件

    scrollTop,表示滚动条上下滚动的距离

    scrollLeft,表示滚动条左右滚动的距离

    注意,scrollTop和 ScrollLeft 距离没有计量单位,实际上是文档滚动的距离

       两个属性不但可以读取,还可以赋值!书写格式:body节点 .scrollTop/.scrollLeft=value;

    语法:IE环境,document .documentElement .scrollTop/.scrollLeft;

       非IE环境,document .body .scrollTop/.scrollLeft;

    为解决兼容性问题,在使用时可以采用“||”(或)的方式:

      document .body .scrollTop/.scrollLeft || document .documentElement .scrollTop/.scrollLeft;

  ② 元素滚动事件

    元素发生滚动时,不存在兼容性问题,但前提是,必须存在滚动条

    元素的滚动条可以通过 overflow相关属性实现

      overflow属性值:

        visible,默认值,溢出内容不会被修剪,会呈现在元素框之外

        hidden,溢出内容会被修剪,且不可见

        auto,如果溢出内容被修剪,浏览器会显示滚动条以便查看

        scroll,浏览器会显示滚动条,以便查看溢出内容

      overflow-x和 overflow-y属性使用方法与overflow基本相同

    语法:元素节点 .scrollTop / scrollLeft;

    注意,可以获取元素位移距离,也可以写入,书写格式:元素节点 .scrollTop/.scrollLeft=value;

11.滚动事件代码  

<html lang="en"> <head>     <meta charset="UTF-8">     <title>滚动事件</title> <style>     body{         width: 3000px;         height: 5000px;         background: linear-gradient(to bottom,lightblue,darkorange);     }     div{         width: 300px;         height: 200px;         margin-left: 100px;         background-color: lightpink;         overflow-y: auto;     }     .divBtn{         margin-left: 100px;     }     .bodyBtn{         position: fixed;         bottom: 10px;         right: 10px;     } </style> </head> <body>     <div>         <p>下周就开学了。</p>         <p>下周就开学了。</p>         <p>下周就开学了。</p>         <p>下周就开学了。</p>         <p>下周就开学了。</p>         <p>下周就开学了。</p>         <p>下周就开学了。</p>         <p>下周就开学了。</p>         <p>下周就开学了。</p>         <p>下周就开学了。</p>         <p>下周就开学了。</p>     </div>     <button class="divBtn">滚回首行</button>     <button class="bodyBtn">返回顶部</button> <script>     var divBox=document.querySelector('div');     var divBtn=document.querySelector('.divBtn');     var bodyBtn=document.querySelector('.bodyBtn');      window.onscroll=function () {         var top=document.body.scrollTop || document.documentElement.scrollTop;         var left=document.body.scrollLeft || document.documentElement.scrollLeft;         console.log('Top:'+top+','+'Left:'+left);     } //  文档页面滚动事件设置     bodyBtn.onclick=function(){         var bodyScrollBack=null;         console.log(bodyBtn.firstChild.nodeValue);         // 添加返回顶部速度效果         bodyScrollBack=setInterval(function () {             var top=document.body.scrollTop || document.documentElement.scrollTop;             top = top-100;             if (top<=0){                 top = 0;                 clearInterval(bodyScrollBack);             }             document.body.scrollTop=top;             document.documentElement.scrollTop=top;   //Chrome环境下也要设置这一句!         },50);     }; //  元素内容滚动事件设置     divBtn.onclick=function(){         var divScrollBack=null;         divScrollBack=setInterval(function () {             var top=divBox.scrollTop;             top = top-10;             if (top<=0){                 top = 0;                 clearInterval(divScrollBack);             }             divBox.scrollTop=top;         },50);     } </script> </body> </html> 

  

赞(0) 打赏
未经允许不得转载:张拓的天空 » WEB前端第三十二课——js事件处理-文档、焦点
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏