處理事件

一、窗口事件處理

1. onload事件:當(dāng)用戶進(jìn)入頁面且所有頁面元素都完成加載時(shí),就會觸發(fā)onload事件。

1.1 html代碼:

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-scale,initial-scale=1">
        <link type="text/css" rel="stylesheet" href="../css/window.css">
        <title>welcome</title>
    </head>
    <body id=pageBody>
        <h1>Welcome to our Web site!</h1> 
        <script type="text/javascript" src="../js/window.js"></script>
    </body>
</html>

1.2 js代碼:


addOnload(initOne);
addOnload(initTwo);
addOnload(initThree);

function addOnload(newFunction) {
    var oldOnload=window.onload;
    
    if (typeof oldOnload=="function"){
        window.onload=function(){
            if (oldOnload){
                oldOnload();
            }
            newFunction();
        }
    }
    else{
        window.onload=newFunction;
    }
}

function initOne(){
    document.getElementById("pageBody").style.backgeoundColor="#0000ff";
}

function initTwo(){
    document.getElementById("pageBody").style.color="#ff0000";
}

function initThree(){
    var allTags=document.getElementsByTagName("*");
    
    for (var i=0;i<allTags.length;i++){
        if (allTags[i].nodeName=="H1"){
            allTags[i].style.border="5px green solid";
            allTags[i].style.padding="25px";
            allTags[i].style.backgroundColor="#ffffff";
        }
    }
}

1.3 output:

onload
2. onunload事件:當(dāng)用戶離開網(wǎng)頁時(shí),就會觸發(fā)onunload事件,需慎重使用。
3.onresize事件:當(dāng)調(diào)整窗口大小時(shí),就會觸發(fā)onresize事件。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容