学网站建设,广东前20大互联网公司,页面设计上边距在哪里找,乐清网站建设公司哪家好说明#xff1a;该文属于 大前端全栈架构白宝书专栏#xff0c;目前阶段免费#xff0c;如需要项目实战或者是体系化资源#xff0c;文末名片加V#xff01;作者#xff1a;不渴望力量的哈士奇(哈哥)#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作#xf… 说明该文属于 大前端全栈架构白宝书专栏目前阶段免费如需要项目实战或者是体系化资源文末名片加V作者不渴望力量的哈士奇(哈哥)十余年工作经验, 从事过全栈研发、产品经理等工作目前在公司担任研发部门CTO。荣誉2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。 白宝书系列 启示录 - 攻城狮的自我修养 Python全栈白宝书 ChatGPT实践指南白宝书 产品思维训练白宝书 全域运营实战白宝书 大前端全栈架构白宝书 文章目录 ⭐ 事件对象 事件对象中的鼠标的属性 事件对象中的键盘属性 ⭐ 事件对象 事件对象 事件处理函数提供一个形式参数它是一个对象封装了本次事件的细节这个参数通常用单词event或字母e来表示 示例代码
oBox.onmousemove function (e) {//对象e就是这次事件的“事件对象”
}事件对象中有很多的强大的属性和方法我们可以直接拿来使用。接下来接下来我们来看一些常用的属性和方法 事件对象中的鼠标的属性
鼠标位置属性就是在鼠标事件中描述鼠标位置的一些属性
属性属性描述clientX鼠标指针相对于浏览器的水平坐标clientY鼠标指针相对于浏览器的垂直坐标pageX鼠标指针相对于整张网页的水平坐标pageY鼠标指针相对于整张网页的垂直坐标offsetX鼠标指针相对于事件源元素的水平坐标offsetY鼠标指针相对于事件源元素的垂直坐标
我们用一张图来解释这些属性具体指的是什么因为浏览器框可能不能完全展示整个网页需要用右侧的滚动条滚动才能看见下图种用虚线框代表整个网页 使用这些属性的示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}#box {width: 200px;height: 200px;background-color: #ccc;margin: 100px;}body {height: 2000px;}#info {font-size: 20px;margin-left: 100px;}/style
/head
bodydiv idbox/divdiv idinfo/divscriptvar oBox document.getElementById(box);var oInfo document.getElementById(info);oBox.onmousemove function (e) {oInfo.innerHTML offsetX/Y: e.offsetX , e.offsetY br clientX/Y: e.clientX , e.clientY br pageX/Y: e.pageX , e.pageY;};/script
/body
/html上述代码中如果页面为往下滚动那么clientX/Y和pageX/Y的值会是一模一样的很好理解因为网页正处于最上方和浏览器的坐标系是重叠的。当页面往下滚动后两者才会出现差异。
需要注意的是DOM中规定offsetX和offsetY是鼠标所在之处的最内部盒子的坐标比如下面的代码中虽然我们设置的是大盒子的事件监听但当鼠标放到小盒子中时offsetX和offsetY显示是以小盒子为基准的坐标 事件对象中鼠标滚轮事件onmousewheel也有属性——deltaY表示鼠标滚轮滚动方向向下滚动时返回正值向上滚动时返回负值 示例代码
bodydiv idbox/divscriptdocument.onmousewheel function (e) {console.log(e.deltaY);}/script
/body事件对象中的键盘属性 e.charCode属性 通常用于onkeypress事件中表示用户输入字符的字符码 e.keyCode属性 通常用于onkeydown事件和onkeyup事件中表示用户按下的按键的“键码”键盘上每一个按键都会对应一个键码 关于字符按键和字符码的对应关系如下
字符对应的字符码charCode数字0~948~57大写字母A~Z65~90小写字母a~z97~122
关于按键和键码的对应关系如下
按键对应的键码keyCode数字0~948~57同charCode字母不分大小写a~z65~90四个方向键⬅⬆➡⬇37、38、39、40回车键13空格键32
使用这些属性的示例代码
bodyinput typetext idfield1div idinfo1/divinput typetext idfield2div idinfo2/divscriptvar oField1 document.getElementById(field1);var oInfo1 document.getElementById(info1);var oField2 document.getElementById(field2);var oInfo2 document.getElementById(info2);oField1.onkeypress function (e) {oInfo1.innerText 您按键的对应的字符码是 e.charCode;};oField2.onkeydown function (e) {oInfo2.innerText 您按键的对应的键码是 e.keyCode;};/script
/body学到这里我们可能还是不知道这个字符码和键码在实际工作中有什么用接下来就来写一个有意思的小案例来实际应用一下这两个属性。
案例 制作一个特效按方向键可以控制页面上的盒子按对应的方向移动
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}#box {width: 100px;height: 100px;background-color: orange;position: absolute;top: 200px;left: 200px;}/style
/headbodydiv idbox/divscriptvar oBox document.getElementById(box);//定义两个全局变量分别表示盒子top属性和left属性var t 200;var l 200;//document对象的键盘按下事件监听即对用户在整个网页上按下按键时进行事件监听document.onkeydown function (e) {switch (e.keyCode) {case 37:l - 3;break;case 38:t - 3;break;case 39:l 3;break;case 40:t 3;break;}//更改样式oBox.style.top t px;oBox.style.left l px;};/script
/body
/html
