处理事件

作者: 味蕾里的青春 | 来源:发表于2016-11-15 23:02 被阅读19次

JS 事件
react事件处理
跨浏览器的事件处理程序
App事件中心
Chapter 07. Broadcast
iOS和Flutter里的事件处理
react文档——事件处理
DOM事件的问题！
2021-09-22 GUI(事件监听机制)
attachEvent和addEventListener区别

一、窗口事件处理

1. onload事件：当用户进入页面且所有页面元素都完成加载时，就会触发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: