WEB前端第三十二課——js事件處理-文檔、焦點

頭號碼甲 2021-09-22

展開全文

1.文檔事件

　　主要是指添加給整個文檔的事件，文檔事件中，絕大部分不需要用戶觸發(fā)調(diào)用，而是通過文檔的不同狀態(tài)進(jìn)行自動執(zhí)行

　　主要事件：

　　　?、?nbsp;load / error，加載成功/失敗事件

　　　?、?nbsp;DOMContentLoaded，當(dāng)DOM加載完成時觸發(fā)事件

　　　?、?nbsp;beforeunload，頁面（文檔）發(fā)生卸載時觸發(fā)事件

　　　　④ readystatechange，文檔加載狀態(tài)判斷事件

　　　?、?nbsp;resize，文檔大小發(fā)生改變時的回調(diào)事件

2.load / error

　　load事件在節(jié)點加載成功時自動觸發(fā)

　　error時間在節(jié)點加載失敗時自動觸發(fā)

　　語法：元素/文檔（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事件的區(qū)別是觸發(fā)時機(jī)不一樣，先觸發(fā)DOMContentLoaded事件，后觸發(fā) load事件

　　DOM文檔加載的步驟：

　　　?、?nbsp;解析HTML結(jié)構(gòu)

　　　　② 加載外部腳本和樣式表文件

　　　?、?nbsp;解析并執(zhí)行腳本代碼

　　　?、?DOM樹構(gòu)建完成　　——?觸發(fā)DOMContentLoaded事件執(zhí)行

　　　?、?nbsp;加載圖片等外部文件

　　　?、?nbsp;頁面加載完成　　——?觸發(fā)load事件執(zhí)行

　　由此看出，樣式文件的加載會阻塞腳本執(zhí)行

　　即，如果把一個內(nèi)部腳本 <script>元素放在了一個 <link>后面，在頁面沒有完成解析時腳本不會觸發(fā)執(zhí)行，直至樣式文件加載完成之后。

　　注意，DOMContentLoaded事件只能使用DOM2方式綁定，不存在DOM0綁定方式！

4.beforeunload

　　頁面發(fā)生卸載時觸發(fā)事件（頁面刷新和關(guān)閉頁面之前），通常情況下配合 event .returnValue使用

　　一般情況下都是直接添加到body上面，如果沒有在body上添加本事件，則需要在 window上添加

　　語法示例：window .onbeforeunload=function(){

　　　　　　　　event .returnValue='';

　　　　　　　　return'信息已修改是否確認(rèn)離開？'

　　　　　　　};

　　注意，beforeunload事件中彈出的對話框一般情況下不允許用戶修改，只能采用默認(rèn)對話框，且在beforeunload關(guān)聯(lián)的回調(diào)函數(shù)中也不支持alert彈出框

5.readystatechange

　　當(dāng) document的 readyState改變時觸發(fā)這個事件（僅第二階段）

　　document .readyState的三個屬性值：

　　　　loading，加載DOM中

　　　　interactive，加載外部資源

　　　　complete，加載完成

　　而 readystatechange事件正是這個狀態(tài)發(fā)生改變時調(diào)用的事件

　　調(diào)用方式可以是 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('頁面加載狀態(tài)：'+document.readyState);
    document.addEventListener('readystatechange',function () {
        console.log('頁面加載狀態(tài)變化：'+document.readyState);
    });
    document.addEventListener('DOMContentLoaded',function () {
        console.log('文檔DOM樹構(gòu)建完成');
    });
    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事件的響應(yīng)時間設(shè)置為了0，也就是說每一次的文檔大小改變都會立即調(diào)用本事件

　　這就造成了一次變化卻發(fā)生了不止一次的resize事件調(diào)用

　　為了解決這個問題可以采用一種延遲的寫法來實現(xiàn)。代碼如下：

<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中當(dāng)前正在和用戶發(fā)生交互的節(jié)點稱為焦點，包括獲取焦點（focus）和失去焦點（blur）兩種情況

　　獲取焦點和失去焦點都既可以使用DOM0綁定也可以使用DOM2綁定，自動觸發(fā)事件執(zhí)行

　　語法：元素節(jié)點 .onfocus / onblur = function(){ };

　　注意，這兩種事件均不支持事件冒泡，只有當(dāng)前節(jié)點觸發(fā)調(diào)用

　　　　　如果需要傳遞觸發(fā)，則需要使用DOM2綁定事件中的捕獲方式

　　事件本身的書寫格式：元素節(jié)點 .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','請設(shè)置6位數(shù)密碼！');
    };
    code.onblur=function(){
        if (code.length!==6){
            code.setAttribute('style','border:1px solid red');
            alert('密碼格式不符合要求，請重新設(shè)置。');  //先于setAttrbute執(zhí)行
        };
    };
</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">手機(jī)號碼:</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">確認(rèn)密碼：</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');
//    用戶名內(nèi)容設(shè)置
    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();
    };
//    手機(jī)號碼內(nèi)容設(shè)置
    phoneNumber.onfocus=function(){
        phoneNumber.setAttribute('placeholder','請?zhí)顚?1位手機(jī)號碼！');
    };
    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();
    };
//    登錄密碼內(nèi)容設(shè)置
    loginCode.onfocus=function(){
        loginCode.setAttribute('placeholder','請設(shè)置6~12位數(shù)字或字母！');
    };
    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='密碼格式不符合要求，請重新設(shè)置';
            loginTips.setAttribute('class','fontRed');
        }
        checkAllInfo();
    };
//    確認(rèn)密碼內(nèi)容設(shè)置
    confirmCode.onfocus=function(){
        confirmCode.setAttribute('placeholder','請確認(rèn)上述密碼！');
    };
    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='密碼不符合要求，請重新確認(rèn)';
            confirmTips.setAttribute('class','fontRed');
        }
        checkAllInfo();
    };
//    驗證碼圖片內(nèi)容設(shè)置
    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');   //此處設(shè)置無效??！
//    驗證碼內(nèi)容設(shè)置
    idtCode.onfocus=function(){
        idtCode.setAttribute('placeholder','請輸入上述圖片內(nèi)驗證碼！');
    };
    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();
    };
//    提交注冊按鈕設(shè)置
    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事件會在文檔或元素發(fā)生滾動操作時觸發(fā)

　　① 文檔滾動事件

　　　　scrollTop，表示滾動條上下滾動的距離

　　　　scrollLeft，表示滾動條左右滾動的距離

　　　　注意，scrollTop和 ScrollLeft 距離沒有計量單位，實際上是文檔滾動的距離

　　　　　　　兩個屬性不但可以讀取，還可以賦值！書寫格式：body節(jié)點 .scrollTop/.scrollLeft=value；

　　　　語法：IE環(huán)境，document .documentElement .scrollTop/.scrollLeft；

　　　　　　　非IE環(huán)境，document .body .scrollTop/.scrollLeft；

　　　　為解決兼容性問題，在使用時可以采用“||”（或）的方式：

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

　?、?nbsp;元素滾動事件

　　　　元素發(fā)生滾動時，不存在兼容性問題，但前提是，必須存在滾動條

　　　　元素的滾動條可以通過 overflow相關(guān)屬性實現(xiàn)

　　　　　　overflow屬性值：

　　　　　　　　visible，默認(rèn)值，溢出內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外

　　　　　　　　hidden，溢出內(nèi)容會被修剪，且不可見

　　　　　　　　auto，如果溢出內(nèi)容被修剪，瀏覽器會顯示滾動條以便查看

　　　　　　　　scroll，瀏覽器會顯示滾動條，以便查看溢出內(nèi)容

　　　　　　overflow-x和 overflow-y屬性使用方法與overflow基本相同

　　　　語法：元素節(jié)點 .scrollTop / scrollLeft；

　　　　注意，可以獲取元素位移距離，也可以寫入，書寫格式：元素節(jié)點 .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>下周就開學(xué)了。</p>
        <p>下周就開學(xué)了。</p>
        <p>下周就開學(xué)了。</p>
        <p>下周就開學(xué)了。</p>
        <p>下周就開學(xué)了。</p>
        <p>下周就開學(xué)了。</p>
        <p>下周就開學(xué)了。</p>
        <p>下周就開學(xué)了。</p>
        <p>下周就開學(xué)了。</p>
        <p>下周就開學(xué)了。</p>
        <p>下周就開學(xué)了。</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);
    }
//  文檔頁面滾動事件設(shè)置
    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環(huán)境下也要設(shè)置這一句！
        },50);
    };
//  元素內(nèi)容滾動事件設(shè)置
    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>