欢迎关注「全栈工程师修炼指南」公众号
设为「星标⭐」每天带你 基础入门 到 进阶实践 再到 放弃学习！
专注 企业运维实践、网络安全、系统运维、应用开发、物联网实战、全栈文章 等知识分享
“ 花开堪折直须折，莫待无花空折枝。 ”
作者主页：[ https://www.weiyigeek.top ]
博客：[ https://blog.weiyigeek.top ]
作者<安全开发运维>答疑交流群，回复【学习交流群】即可加入
文章目录:
0x00 前言简述
0x01.文档事件
0x02.表单事件
0x03.键盘事件
0x04.鼠标事件
0x05.多媒体事件
0x06.综合事件
0x07.元素属性
本文为作者原创文章，为尊重作者劳动成果禁止非授权转载，若需转载请在【全栈工程师修炼指南】公众号留言，或者发送邮件到 [master@weiyigeek.top] 中我将及时回复。
描述: 作者在前面第【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项目[ https://github.com/WeiyiGeek/DevelopLearnig/fore-end/HTML ]
描述: 此小节主要针对于 window 对象触发的事件（应用到 <body> 标签）。
事件一览:
# 事件属性 描述
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，前置在<body>中，一旦完全加载所有内容（包括图像、脚本文件、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='确定要退出本页吗'">组合示例:
<!-- 示例1.windows事件，文档页面 -->
<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>
<!-- 示例2.每当＜img＞元素成功加载其资源时，此示例就会打印到屏幕上。-->
<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 += "<div>loaded!</div>";
};
function reload() {
image.src = "favicon-weiyigeek.png";
}
</script>
描述: 由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：
事件一览:
onblur # 元素失去焦点时运行的脚本。
onchange # 在元素值被改变时运行的脚本。
oncontextmenu # 当上下文菜单被触发时运行的脚本。
onfocus # 当元素获得焦点时运行的脚本。
onformchange # 在表单改变时运行的脚本。
onforminput # 当表单获得用户输入时运行的脚本。
oninput # 当元素获得用户输入时运行的脚本。
oninvalid # 当元素无效时运行的脚本。
onreset # 当表单中的重置按钮被点击时触发。HTML5 中不支持。
onselect # 在元素中文本被选中后触发。
onsubmit # 在提交表单时触发。1.oncontextmenu 事件: 针对HTML5标准生效的，可在网页上禁用右键菜单，通常在Body标签中使用。
<body oncontextmenu='return false'> <!--右键在body主体上不能弹出右键菜单-->
<body oncontextmenu='return true'> <!--右键在body主体上不能弹出右键菜单-->
2.onfocus / onblur 事件: 前者是当元素获得焦点时运行的脚本（常用于 <input>、<select> 以及 <a>），后者是元素失去焦点时运行的脚本（常用于表单验证代码（例如用户离开表单字段））。
请输入您的姓名: <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="file">、<input type="password">、<input type="text">、<keygen> 以及 <textarea>
<input type="text" value="请选中我" onselect="showMsg()">4.onchange 事件: 在元素值被改变时运行的脚本, 此属性属性适用于<input>、<textarea> 以及 <select>元素。
<!--获取该input的value值-->
请输入文本：<input type="text" name="txt" value="Hello" onchange="alert(this.value)">5.onsubmit 事件: 在提交表单时触发，此属性只在 <form> 中使用。
<form action="/demo/demo_form.asp" onsubmit="alert('在提交表单时触发.')">
</form>综合示例：
<!DOCTYPE html>
<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 # 当松开按键时运行脚本1.onkeydown / onkeyup 事件, 前者是在用户按下按键时触发，后者是在用户释放按键时触发.
温馨提示: 两者的属性不适用以下元素：
<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。
2.onkeypress 事件: 在用户敲击按钮时触发。
注释：在任何浏览器中，onkeypress 事件不会被所有按键触发（例如 ALT、CTRL、SHIFT、ESC）。
示例演示:
<input type="text" onkeydown="alert('当按下按键时运行脚本')">
<input type="text" onkeyup="alert('当松开按键时运行脚本')">
<p>当用户在输入字段中按下按键时触发函数, 此函数提示用户已按按键。</p>
<input type="text" onkeypress="alert('当按下并松开按键时运行脚本')">0x04.鼠标事件
描述: 通过鼠标（Mouse Events）触发事件, 类似用户的行为, 点击事件也是在HTML元素中比较常用的，所以需要特别注意。
事件一览：
onclick # 当单击鼠标时运行脚本
ondblclick # 当双击鼠标时运行脚本
ondrag # 当拖动元素时运行脚本
ondragend # 当拖动操作结束时运行脚本
ondragenter # 当元素被拖动至有效的拖放目标时运行脚本
ondragleave # 当元素离开有效拖放目标时运行脚本
ondragover # 当元素被拖动至有效拖放目标上方时运行脚本
ondragstart # 当拖动操作开始时运行脚本
ondrop # 当被拖动元素正在被拖放时运行脚本
onmousedown # 当按下鼠标按钮时运行脚本
onmousemove # 当鼠标指针移动时运行脚本
onmouseout # 当鼠标指针移出元素时运行脚本
onmouseover # 当鼠标指针移至元素之上时运行脚本
onmouseup # 当松开鼠标按钮时运行脚本
onmousewheel # 当转动鼠标滚轮时运行脚本
onscroll # 当滚动元素的滚动条时运行脚本简单说明：
1.onclick / ondblclick 事件: 前置当发生鼠标点击时触发，后者当发生鼠标双击时触发。
<!-- #示例1.当点击按钮时执行一段 JavaScript，当按钮被单击时触发函数，此函数把文本从 Field1 复制到 Field2 中。-->
<script>
function copyText(){
document.getElementById("field2").value=document.getElementById("field1").value;
}
</script>
Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2"><br><br>
<button onclick="copyText()">复制文本</button> <!--左键单击-->
<button ondblclick="copyText()">复制文本</button> <!--左键双击 -->
<!-- #示例2.点击提示并不跳转 -->
<a href="/login" onclick="alert('未到开放时间');return false;">登录入口</a>温馨提示：上面两个属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>
2.onmousedown / onmouseup 事件：前者是当元素上按下鼠标按钮时触发，后者是当在元素上释放鼠标按钮时触发。
<script>
function mouseDown(){
document.getElementById("p1").style.color="red";
}
function mouseUp(){
document.getElementById("p1").style.color="green";
}
</script>
<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">
请点击文本！
mouseDown() 函数当鼠标按钮在段落上被按下时触发, 并把文本颜色设置为红色。
mouseUp() 函数在鼠标按钮被释放时触发, 并把文本的颜色设置为绿色。
</p>3.onmousemove / onmouseover / onmouseout 事件: 前者是当鼠标指针移动到运行脚本，中者是当鼠标指针移至元素之上时运行脚本，后者是当鼠标指针移出元素时运行脚本
<script>
// onmousemovem,移入
function bigImg(x){
x.style.height="180px";
x.style.width="180px";
}
// onmouseout，移除
function normalImg(x){
x.style.height="128px";
x.style.width="128px";
}
</script>
<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" style="border: 1px solid block" src="/i/eg_smile.gif" alt="Smiley" >
温馨提示: 相对于的事件次序（限于鼠标左/中键）onmousedown onmouseup onclick, 相对于事件次序（限于鼠标右键）onmousedown onmouseup oncontextmenu（是不是在页面主体上显示右键菜单）
温馨提示: 主要是拖放，ondrag（拖动运行脚本）~ ondrop（正在被拖动时候就是放入元素中的时候）之间的。
描述: 多媒体事件（Media Events），通过视频（videos），图像（images）或者音频（audio） 触发该事件，多应用于 HTML 媒体元素比如 <audio>, <embed>, <img>, <object>, 和<video>等。
事件一览
onabort # 当发生中止事件时运行脚本
oncanplay # 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
oncanplaythrough # 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
ondurationchange # 当媒介长度改变时运行脚本
onemptied # 当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本
onended # 当媒介已抵达结尾时运行脚本
onerror # 当在元素加载期间发生错误时运行脚本
onloadeddata # 当加载媒介数据时运行脚本
onloadedmetadata # 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
onloadstart # 当浏览器开始加载媒介数据时运行脚本
onpause # 当媒介数据暂停时运行脚本
onplay # 当媒介数据将要开始播放时运行脚本
onplaying # 当媒介数据已开始播放时运行脚本
onprogress # 当浏览器正在取媒介数据时运行脚本
onratechange # 当媒介数据的播放速率改变时运行脚本
onreadystatechange # 当就绪状态（ready-state）改变时运行脚本
onseeked # 当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
onseeking # 当媒介元素的定位属性为真且定位已开始时运行脚本
onstalled # 当取回媒介数据过程中（延迟）存在错误时运行脚本
onsuspend # 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
ontimeupdate # 当媒介改变其播放位置时运行脚本
onvolumechange # 当媒介改变音量亦或当音量被设置为静音时运行脚本
onwaiting # 当媒介已停止播放但打算继续播放时运行脚本示例演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media 媒体事件案例实践</title>
</head>
<body>
<h1>多媒体事件（Media Events），通过视频（videos），图像（images）或者音频（audio） 触发该事件，多应用于 HTML 媒体元素比如 audio, embed, img, object, 和 video 等。</h1>
<div name="video">
<video src="./微信公众号与小程序联合传播样式-动画.mp4" poster="./logo.png" width="720x" height="480px" controls muted autopictureinpicture playsinline onplay="alert('视频开始播放.')" onpause="alert('视频已停止播放.')" ondurationchange="alert('视频播放画面已改变')" onratechange="console.log(this.playbackRate + ' 播放速率发生改变!');">
抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 <a href="videofile.ogg">下载</a>
并用你喜欢的播放器观看！
</video>
</div>
</body>
</html>
描述: 此小节主要介绍某些元素的综合事件示例，例如 鼠标键盘一起使用触发的事件，以及针对文本处理的事件。
属性一览:oncopy 属性 ：用来获取或设置当前元素的copy事件的事件处理函数。
oncut 属性 : 用来获取或设置当前元素的cut事件的事件处理函数。
onpaste 属性 : 用来获取或设置当前元素的paste事件的事件处理函数。
oninput 属性 : 当一个 <input>, <select>, 或 <textarea> 元素的 value 被修改时，会触发 input 事件。ondrag 属性 : 在用户拖动元素或选择的文本时，每隔几百毫秒就会被触发一次。
ondragstart 属性 : 在用户开始拖动元素或被选择的文本时调用。
ondragenter 属性 : 在可拖动的元素或者被选择的文本进入一个有效的放置目标时触发。
ondragleave 属性 : 在拖动的元素或选中的文本离开一个有效的放置目标时被触发。
ondragover 属性 : 在可拖动的元素或者被选择的文本被拖进一个有效的放置目标时（每几百毫秒）触发。
ondragend 属性 : 在拖放操作结束时触发（通过释放鼠标按钮或单击 escape 键）
ondrop 属性 ：在元素或选中的文本被放置在有效的放置目标上时被触发。
示例演示:
示例1.复制粘贴件齐全属性以及输入同步触发示例
<h5>1.oncopy / oncut / onpaste 事件演示:</h5>
<div oncopy="log('复制被阻止'); return false;"> 请尝试着复制这句话，到介绍！</div>
<br>
<label for="t1">
介绍: <br>
<textarea name="t1" id="t1" cols="30" rows="3" oncopy="log('复制成功!');" oncut="log('剪切被阻止!'); return false;" onpaste="logPause('粘贴被阻止!');return false;"> 尝试剪切和复制该文本域内的文本! 以及粘贴到此处。</textarea>
</label>
<br>
<label for="t2">
结果:<br>
<textarea name="t2" id="t2" cols="30" rows="3"></textarea>
</label>
<script>
function log(txt){
document.getElementById("t2").appendChild(document.createTextNode(txt + "\n"));
}
function logPause(txt) {
document.getElementById("t2").appendChild(document.createTextNode(txt + "\n"));
}
</script>
<h5>2.oninput 事件演示:</h5>
<input placeholder="Enter some text" name="name" oninput="logInput(this)"/>
<p id="values"></p>
<script>
function logInput(obj) {
document.getElementById("values").textContent = obj.value;
}
</script>示例 2.拖动元素触发示例，根据触发结果可验证触发流程即dragstart [开始拖拽时] > dragging [拖动时] > dragenter [进入容器时]> dragover [在容器中时] > drop [放置时] > dragend [释放时]
<h5>3.Drag and drop example</h5>
<div class="dropzone">
<div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone" id="droptarget"></div>
<style>
body {
/* Prevent the user selecting text in the example */
user-select: none;
}
#draggable {
text-align: center;
background: white;
}
.dropzone {
width: 200px;
height: 20px;
background: blue;
margin: 10px;
padding: 10px;
}
.dropzone.dragover {
background-color: purple;
}
.dragging {
opacity: .5;
}
</style>
<script>
let dragged;
/* events fired on the draggable target */
const source = document.getElementById("draggable");
source.addEventListener("drag", (event) => {
console.log("1.dragging");
});
source.addEventListener("dragstart", (event) => {
console.log("2.dragstart");
// store a ref. on the dragged elem
dragged = event.target;
// make it half transparent
event.target.classList.add("dragging");
});
source.addEventListener("dragend", (event) => {
console.log("3.dragend");
// reset the transparency
event.target.classList.remove("dragging");
});
/* events fired on the drop targets */
const target = document.getElementById("droptarget");
target.addEventListener("dragover", (event) => {
console.log("4.dragover");
// prevent default to allow drop
event.preventDefault();
}, false);
target.addEventListener("dragenter", (event) => {
console.log("5.dragenter");
// highlight potential drop target when the draggable element enters it
if (event.target.classList.contains("dropzone")) {
event.target.classList.add("dragover");
}
});
target.addEventListener("dragleave", (event) => {
console.log("6.dragleave");
// reset background of potential drop target when the draggable element leaves it
if (event.target.classList.contains("dropzone")) {
event.target.classList.remove("dragover");
}
});
target.addEventListener("drop", (event) => {
console.log("7.drop");
// prevent default action (open as link for some elements)
event.preventDefault();
// move dragged element to the selected drop target
if (event.target.classList.contains("dropzone")) {
event.target.classList.remove("dragover");
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
}
});
</script>执行结果:
偷偷的告诉你哟？【极客全栈修炼】微信小程序已开放
可直接在微信里面直接浏览博主文章哟，后续将上线更多有趣的小工具。
0x07.元素属性
描述：此小节将HTML中特殊的元素属性进行整理演示总结，方便需要时备查，后续将会持续更新。
accessKey 、accessKeyLabel 属性
accessKey 属性设置了这样一个按键——用户通过敲击这个键把焦点跳转到这个元素上.
accessKeyLabel 属性返回一个 String 表示这个元素分配的访问密钥 (如果有的话); 否则返回一个空字符串。
<script>
function btnAccessKey(obj) {
if (obj.accessKeyLabel) {
obj.title += ' [' + obj.accessKeyLabel + ']';
} else {
obj.title += ' [' + obj.accessKey + ']';
}
var p = document.createElement('p');
p.textContent = 'Clicked! => ' + obj.title;
obj.parentNode.appendChild(p);
};
</script>
<button accesskey="h" title="Caption" id="btn1" onclick="btnAccessKey(this)">Hover me</button>温馨提示: Element.accessKey 属性很少使用，因为它很容易与现代浏览器自带的快捷键冲突。为了解决这个问题，浏览器约定 accessKey 键与特定按键一起按（比如 Alt + accessKey）来生效快捷键行为。
contentEditable 、isContentEditable 属性
描述: contentEditable 属性用于表明元素是否是可编辑的, 该枚举属性（enumerated attribute）可以具有下面的几种值之一："true" 表明该元素可编辑, "false" 表明该元素不可编辑, "inherit" 表明该元素继承了其父元素的可编辑状态。
isContentEditable 只读属性返回一个布尔值，该值是如果元素的内容true可编辑，否则返回false。
hidden 属性
描述: hidden 属性主要用于标签元素的隐藏，例如 <p hidden>网页上是看不见我的</p>
offsetHeight、offsetWidth、offsetLeft、offsetTop、offsetParent 属性
offsetHeight : 只读属性，返回该元素的像素高度，其包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before 或:after 等伪类元素的高度。
offsetWidth : 只读属性，返回该元素的布局宽度, 其包含元素的边框 (border)、水平线上的内边距 (padding)、竖直方向滚动条 (scrollbar)（如果存在的话）、以及 CSS 设置的宽度 (width) 的值。
offsetParent ：只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table, td, th, body 元素。
offsetLeft ：只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。
offsetTop ：只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。
亲，文章就要看完了，不关注一下【全栈工程师修炼指南】吗？
tabIndex 属性
描述: 此处属性主要是表示当前元素的 Tab 键顺序，但是需要注意其禁用的元素不参与 Tab 键顺序，特性:
带有正值的元素，具有相同值的元素应按其出现的顺序进行导航，导航从最低到最高。
不支持该属性或支持该属性并按其出现顺序分配给的元素。
示例演示:
<div>
<p>示例1.快捷按键</p>
<script>
function btnAccessKey(obj) {
if (obj.accessKeyLabel) {
obj.title += ' [' + obj.accessKeyLabel + ']';
} else {
obj.title += ' [' + obj.accessKey + ']';
}
var p = document.createElement('p');
p.textContent = 'Clicked! => ' + obj.title;
obj.parentNode.appendChild(p);
};
</script>
<button accesskey="h" title="Caption" id="btn1" onclick="btnAccessKey(this)">点击我，或者使用ALT+h按键访问我哟!</button>
</div>
<p>示例2.元素可编辑的</p>
<div contentEditable="true">此处文本元素可被编辑</div>
<p id="firstParagraph">文字不能被编辑.</p>
<p id="secondParagraph" contenteditable="true">Editable Paragraph, 文字可被编辑.</p>
<script>
const firstParagraph = document.getElementById("firstParagraph");
const secondParagraph = document.getElementById("secondParagraph");
console.log("firstParagraph ：" + firstParagraph.isContentEditable, "\nsecondParagraph ：" + secondParagraph.isContentEditable )
</script>
<p>示例3.隐藏元素</p>
<div id="welcome" class="panel">
<h5>Welcome to weiyigeek!</h5>
<p hidden>By clicking "OK" you agree to be awesome every day!</p>
<button class="button" id="okButton">OK</button>
</div>
<p>示例4.元素距离</p>
<div id="container">
<div id="title">title</div>
<div id="descript">descript</div>
<div id="body">body</div>
</div>
<script>
var a = document.getElementById("descript").offsetHeight;
var b = document.getElementById("descript").offsetWidth;
var c = document.getElementById("descript").offsetTop;
var d = document.getElementById("descript").offsetLeft;
console.log("offsetHeight:" + a, "offsetWidth" + b, "offsetTop" + c,"offsetLeft" + d)
</script>
<p>示例5.元素 Tab 键顺序</p>
<input type="number" name="number" id="number" placeholder="tab序号为2">
<input type="email" name="email" id="email" class="form-control" value="master@weiyigeek.top" required="required" title="" placeholder="tab序号为1">
<script>
document.getElementById("number").tabIndex=2;
document.getElementById("number").tabIndex=1;
</script>
</div>
</body>
</html>
本文至此完毕，更多技术文章，尽情等待下篇好文！
原文地址: https://blog.weiyigeek.top/2023/6-18-751.html
如果此篇文章对你有帮助，请你将它分享给更多的人!
学习书籍推荐 往期发布文章 
公众号回复【0008】获取【Ubuntu22.04安装与加固脚本】
公众号回复【10001】获取【WinServer安全加固脚本】
公众号回复【10002】获取【KylinOS银河麒麟安全加固脚本】
公众号回复【0011】获取【k8S二进制安装部署教程】
公众号回复【0014】获取【Nginx学习之路汇总】
公众号回复【0015】获取【Jenkins学习之路汇总】
热文推荐
欢迎长按（扫描）二维码 ，获取更多渠道哟!
欢迎关注 【全栈工程师修炼指南】(＾Ｕ＾)ノ~ＹＯ
添加作者微信【weiyigeeker】，拉你一起学习交流吧!
关注回复【学习交流群】即可加入【安全开发运维沟通交流群】
各位志同道合的朋友，若需要【本公众号文章长白】清添加作者微信。
温馨提示: 由于作者水平有限，本章错漏缺点在所难免，希望读者批评指正，若有问题或建议请在文章末尾留下您宝贵的经验知识，或联系邮箱地址 master@weiyigeek.top 或 关注公众号 [全栈工程师修炼指南] 留言。
朋友点个【赞 + 在看】吧！
点击【"阅读原文"】获取更多有趣的知识!