JavaScript事件——其他类事件_dom事件οnfοcus-优快云博客

本文深入解析JavaScript中的各类事件，包括加载、焦点、尺寸变化等，并探讨如何有效利用这些事件提升用户体验和网页性能。

三、其他类事件

1》οnlοad===》加载(DOM加载完毕)
在这里插入图片描述

如果调换313和314的位置那么不会给background加背景颜色

这里会报错，没有style属性

如果打印box，会获取空值，而不是节点
原因在于：先加载的是js文件，其次是box的div节点

解决：利用onload加载事件
先将DOM结构(DOM元素即文档内的所有节点)加载完成后再加载事件里的内容
在这里插入图片描述

2》οnfοcus==》得到焦点
3》onblur ===》失去焦点
在这里插入图片描述

鼠标移入，得到焦点，显示淡粉色背景
在这里插入图片描述

鼠标移出，失去焦点，显示浅黄色背景
在这里插入图片描述

4》οnresize===》浏览器或者框架尺寸发生变化时触发的事件
在这里插入图片描述

当浏览器或框架尺寸变化时，会弹出1

5》onscoll===》滚动条发生变化时触发的事件

当拉动滚动条会出现系统弹出框

6》onchange ==》值发生变化时触发的事件

注：若点天津(不改变值)，则不会弹出；当改变为西藏/厦门后(改变值)才会弹出
在这里插入图片描述

#其他类事件补充 #:


onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键

JavaScript事件可以做很多事件：用于处理表单验证，用户输入，用户行为及浏览器动作等
• 页面加载时触发事件
• 页面关闭时触发事件
• 用户点击按钮执行动作
• 验证用户输入内容的合法性
也可以使用多种方法来执行 JavaScript 事件代码
• HTML 事件属性可以直接执行 JavaScript 代码
• HTML 事件属性可以调用 JavaScript 函数
• 你可以为 HTML 元素指定自己的事件处理程序
• 你可以阻止事件的发生。