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>

  

7.resize

  浏览器窗口变化事件

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

  

    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>

  

 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;          对字符无效*/
            letter-spacing: 10px;
            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('letter-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>

      

 

 

 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>

  

posted @ 2020-08-30 23:28  后来喵  阅读(374)  评论(0编辑  收藏  举报