DOM资料之事件

最新推荐文章于 2024-05-12 10:45:29 发布

原创最新推荐文章于 2024-05-12 10:45:29 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

DOM 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了DOM事件类型及其应用场景，包括鼠标、键盘、表单等事件，并重点解释了window.onload事件的作用及其实现方式。

◆ 事件类型：

事件名	说明
onclick	鼠标单击
ondblclick	鼠标双击
onkeyup	按下并释放键盘上的一个键时触发
onchange	文本内容或下拉菜单中的选项发生改变
onfocus	获得焦点，表示文本框等获得鼠标光标。
onblur	失去焦点，表示文本框等失去鼠标光标。
onmouseover	鼠标悬停，即鼠标停留在图片等的上方
onmouseout	鼠标移出，即离开图片等所在的区域
onload	网页文档加载事件
onunload	关闭网页时
onsubmit	表单提交事件
onreset	重置表单时

◆ window.onload事件：
页面加载（文本和图片）完毕时触发该事件

用途：
网页代码是从上到下加载的，如果使用元素在定义元素之前，容易报错。window.onload事件可以使整个页面上所有元素加载完毕后再执行js内容，这样可以预防使用标签在定义标签之前。

示例：不会报错

<script>
    window.onload = function () {
        var aaa = document.getElementById("box");
        console.log(aaa);
        aaa.style.width = "100px";
    }
</script>

<div id="box"></div>