欢迎关注「全栈工程师修炼指南」公众号
设为「星标⭐」每天带你基础入门到进阶实践再到放弃学习！
专注企业运维实践、网络安全、系统运维、应用开发、物联网实战、全栈文章等知识分享
“花开堪折直须折，莫待无花空折枝。”
作者主页：[ ]
博客：[]
作者答疑交流群，回复【学习交流群】即可加入
文章目录:
本文为作者原创文章，为尊重作者劳动成果禁止非授权转载，若需转载请在【全栈工程师修炼指南】公众号留言，或者发送邮件到 [master@weiyigeek.top] 中我将及时回复。
0x00 前言简述
描述: 作者在前面第【1.HTML基础必备知识学习笔记】章节中介绍了 HTML 全局属性，本章将主要讲解 HTML 中元素的特有事件属性，HTML 有能力让事件触发浏览器中的动作，例如，当用户单击元素时启动 JavaScript 脚本，由于此处还未讲解 JS 脚本，所以文章只是简单用弹窗alert()方法或者console.log()做展示。
温馨提示: 此文为前端必备，除此之外针对于网络安全爱好者Web方向的朋友也需要进行了解，下述事件可以触发 XSS（跨站工具） 或者模拟用户请求攻击（CSRF）。
在下述列出了可添加到 HTML/HTML5 元素以定义事件操作的全局事件属性, 例如常用的点击事件属性:onclick (点击), ondblclick（双击）, onmousedown（按下）, onmouseup （释放鼠标）, onmouseover(移到), onmousemove（移除）, onmouseout（移出元素）, onkeypress(敲击按键), onkeydown（按下按键）, onkeyup（释放按键）
温馨提示: 下述实践示例代码可以访问作者开发学习的Github项目[]
0x01.文档事件
描述: 此小节主要针对于 window 对象触发的事件（应用到标签）。
事件一览:
# 事件属性 描述
onafterprint # 文档打印之后运行的脚本。
onbeforeprint # 文档打印之前运行的脚本。
onbeforeunload # 文档卸载之前运行的脚本。
onerror # 在错误发生时运行的脚本。
onhaschange # 当文档已改变时运行的脚本。
onload # 页面结束加载之后触发。
onmessage # 在消息被触发时运行的脚本。
onoffline # 当文档离线时运行的脚本。
ononline # 当文档上线时运行的脚本。
onpagehide # 当窗口隐藏时运行的脚本。
onpageshow # 当窗口成为可见时运行的脚本。
onpopstate # 当窗口历史记录改变时运行的脚本。
onredo # 当文档执行撤销（redo）时运行的脚本。
onresize # 当浏览器窗口被调整大小时触发。
onstorage # 在 Web Storage 区域更新后运行的脚本。
onundo # 在文档执行 undo 时运行的脚本。
onunload # 一旦页面已下载时触发（或者浏览器窗口已被关闭）。
简单补充:
1.onload/onunload/onbeforeunload事件
其中最常用的三个属性是onload/onunload/onbeforeunload，前置在中，一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本, 而中者onunload在用户从页面导航离开时发生（通过点击链接、提交表单或者关闭浏览器窗口等等）执行对应脚本，后者在用户刷新页面时（直接关闭当前标签页没有触发）刷新时触发。
2.onbeforeprint/onafterprint事件
它们分别是在文档打印之前、后运行的脚本，并且onafterprint属性常与onbeforeprint属性一同使用, 例如在网页中使用Ctrl+P进行触发。
3.onresize事件
发生于对象被调整大小时，常用于浏览器窗口被调整尺寸时执行一段js代码。
示例演示:
<body onafterprint="alert('文档打印之后运行的脚本.')">
<body onresize="alert('当浏览器窗口被调整大小时执行.')">
<body onunload="alert('当用户未加载文档时执行.')">
<body onbeforeunload="window.event.returnValue='确定要退出本页吗'">
组合示例:
<body onload="alert('页面加载完毕!');console.log('1.页面加载完毕!')" onresize="alert('当浏览器窗口被调整大小时执行!');console.log('2.当浏览器窗口被调整大小时执行!')" onpagehide="alert('窗口被隐藏!');console.log('3.窗口被隐藏!')" onpageshow="alert('窗口正在显示!');console.log('4.窗口正在显示!')" onbeforeunload="console.log('5.确定要退出本页吗!');window.event.returnValue='确定要退出本页吗';">
<h1>针对 window 对象触发的事件（应用到 <body> 标签）：</h1>
</body>
<img id="image" src="favicon-weiyigeek.png" alt="MDN logo" width="72" />
<div><button onclick="reload()">Reload</button></div>
<script>
const image = document.getElementById("image");
image.onload = () => {
document.body.innerHTML += "loaded!";
};
function reload() {
image.src = "favicon-weiyigeek.png";
}
</script>
0x02.表单事件
描述: 由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：
事件一览:
onblur # 元素失去焦点时运行的脚本。
onchange # 在元素值被改变时运行的脚本。
oncontextmenu # 当上下文菜单被触发时运行的脚本。
onfocus # 当元素获得焦点时运行的脚本。
onformchange # 在表单改变时运行的脚本。
onforminput # 当表单获得用户输入时运行的脚本。
oninput # 当元素获得用户输入时运行的脚本。
oninvalid # 当元素无效时运行的脚本。
onreset # 当表单中的重置按钮被点击时触发。HTML5 中不支持。
onselect # 在元素中文本被选中后触发。
onsubmit # 在提交表单时触发。
1.oncontextmenu事件: 针对HTML5标准生效的，可在网页上禁用右键菜单，通常在Body标签中使用。
<body oncontextmenu='return false'>
<body oncontextmenu='return true'>
2.onfocus / onblur事件: 前者是当元素获得焦点时运行的脚本（常用于、 以及 ），后者是元素失去焦点时运行的脚本（常用于表单验证代码（例如用户离开表单字段））。
请输入您的姓名: <input type="text" id="fname" onfocus="setStyle(this.id)"><br>
请输入您的姓名（英文字符）：<input type="text" name="fname" id="fname" onblur="document.getElementById(this.id).value=document.getElementById(this.id).toUpperCase()">
3.onselect事件: 在元素中文本被选中后触发, 此属性可用于以下元素内：、、、 以及
<input type="text" value="请选中我" onselect="showMsg()">
4.onchange事件: 在元素值被改变时运行的脚本, 此属性属性适用于、 以及 元素。
请输入文本：<input type="text" name="txt" value="Hello" onchange="alert(this.value)">
5.onsubmit事件: 在提交表单时触发，此属性只在中使用。
<form action="/demo/demo_form.asp" onsubmit="alert('在提交表单时触发.')">
</form>
综合示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>针对 HTML 表单内的动作触发的事件，此处在 form 元素中展示</title>
<script>
// contextmenu 禁用右键菜单
document.oncontextmenu = function(e) {
console.log("网页文档无法使用右键菜单!")
//或者 e.preventDefault()
re turn false;
}
// 兼容mac电脑的方法
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
})
</script>
</head>
<body oncontextmenu="alert('禁用body元素包含中右键菜单，你是打不开的!');return false" style="border: 0;padding: 0;">
<form action="#" method="get" onsubmit="checkForm()">
<label for="username">账 号 <input type="text" name="username" id="username" placeholder="登录账号" onfocus="setInputBorderStyle(this.id)" onblur="resetInputBorderStyle(this.id)" onselect="copyUserName(this.id)" onchange="checkField(this.value)"></label>
<label for="password">密 码 <input type="password" name="password" id="password" placeholder="登录密码" onfocus="setInputBorderStyle(this.id)" onblur="resetInputBorderStyle(this.id)"></label>
<label for="vertify">验证码 <input type="text" name="vertify" id="vertify" placeholder="验证码字母数字" onfocus="setInputBorderStyle(this.id)" onblur="resetInputBorderStyle(this.id)" onchange="setVertifyUpperCase(this.id)" ></label>
<input type="submit" value="登录">
</form>
<h1>针对 HTML 表单内的动作触发的事件，此处在 form 元素中展示 </h1>
<script>
function setInputBorderStyle(obj) {
console.log("1.正在设置" + obj + "对象，border 样式属性")
document.getElementById(obj).style.border="1px solid #28548a";
}
function resetInputBorderStyle(obj) {
console.log("2.取消设置" + obj + "对象，border 样式属性")
document.getElementById(obj).style.border="";
}
function setVertifyUpperCase(obj) {
console.log("3.取消设置" + obj + "对象，大小写值")
var x = document.getElementById(obj).value.toUpperCase()
document.getElementById(obj).value=x
}
function copyUserName(obj) {
console.log("4.你已经选择中账号" + obj );
alert("你已经选择中账号:" + document.getElementById(obj).value)
}
function checkField(value) {
console.log("5.输入值已更改值 = " + value);
alert("输入值已更改,值为:" + value); //利用一个val变量来存放value值
}
function checkForm() {
console.log("6.正在提交表单数据.");
alert("正在提交表单数据.");
}
</script>
</body>
</html>
<body>
0x03.键盘事件
描述: 在网页中 Keyboard 按键的动作触发的事件，也是几乎应用到所有 HTML 元素，最常用还是 form 元素中，按键（Keyboard） 事件的执行次序：onkeydown onkeypress onkeyup.
事件一览
onkeydown # 当按下按键时运行脚本
onkeypress # 当按下并松开按键时运行脚本
onkeyup # 当松开按键时运行脚本
温馨提示: 两者的属性不适用以下元素：、、
、、、、、
、
限时特惠：本站每日持续更新海量各大内部网赚创业教程，会员可以下载全站资源点击查看详情
站长微信：11082411
