JAVAACRIPT基础教程(第8版)---第8章_处理事件

最新推荐文章于 2021-02-27 02:19:15 发布

bit_7

最新推荐文章于 2021-02-27 02:19:15 发布

阅读量603

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端开发

本文链接：https://blog.youkuaiyun.com/bit_7/article/details/51291617

web前端开发专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在页面加载完成后执行多个操作，并详细解释了页面加载事件及其在不同场景的应用，包括用户离开、调整大小、窗口移动等常见事件处理，同时深入探讨了鼠标事件、表单事件处理以及键盘事件的基本概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

onload 当用户进入页面且所有页面元素都完成加载后,将触发这个事件.

如果在加载页面时,需要进行多个操作,那么该怎么做?
举个例子:

<!DOCTYPE html>
<html>
<head>
    <title>Welcome!</title>
    <script src="script01.js"></script>
</head>
<body id="pageBody">
    <h1>Welcome to our Web site!</h1>
</body>

script01.js:

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

function addOnload(newFunction) {
        //检查oldOnload变量类型.如果已经设置了window.onload ,它就是一个函数调用(否则是空的).
    var oldOnload = window.onload;

    // 将window.onload 设置为一个匿名函数
    if (typeof oldOnload == "function") {
        //
        window.onload = function() {
            if (oldOnload) {
                oldOnload();
            }
            newFunction();
        }
    }
    else {
        window.onload = newFunction;
    } 
}

function initOne() {
    document.getElementById("pageBody").style.backgroundColor = "#00F";
}

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

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 = "#FFF";
        }
    }
}

onunload event:用户离开网页时 ,触发的事件处理程序
onresize : 调整网页大小
onmove:窗口移动时触发此事件处理程序
onbort:用户取消网页上的图形加载时,触发的事件处理程序
onerror: 当页面上发生js错误时,触发此事件处理程序
onfocus
onblur

处理鼠标事件

onmousedown 按下鼠标时触发
onmouseup 松开鼠标时触发
onmousemove 移动鼠标时触发
onmouseover 当鼠标移动进任何注册了onmouseover事件处理程序的区域时,就触发该事件
onmouseout 当鼠标离开了注册此事件的区域时,就会触发该事件
ondbclick 鼠标双击操作触发该事件
onclick 鼠标单击触发该事件

表单事件处理

onsubmit
onreset
onchange 当用户修改字段时,就会触发onchange事件处理程序,用来立即验证用户输入的信息
onselect 如果用户选择了一个input或textarea表单区域中的文本,就会触发onselect 处理程序
onclick 用户点击复选框或单选按钮时触发该事件
onblur 焦点转移, 比如:用它迫使用户在一个字段中输入数据
onfocus 关注焦点