。

荣誉2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。

白宝书系列

事件处理函数提供一个形式参数它是一个对象封装了本次事件的细节这个参数通常用单词event或字母e来表示

示例代码

}事件对象中有很多的强大的属性和方法我们可以直接拿来使用。

接下来接下来我们来看一些常用的属性和方法

属性属性描述clientX鼠标指针相对于浏览器的水平坐标clientY鼠标指针相对于浏览器的垂直坐标pageX鼠标指针相对于整张网页的水平坐标pageY鼠标指针相对于整张网页的垂直坐标offsetX鼠标指针相对于事件源元素的水平坐标offsetY鼠标指针相对于事件源元素的垂直坐标

我们用一张图来解释这些属性具体指的是什么因为浏览器框可能不能完全展示整个网页需要用右侧的滚动条滚动才能看见下图种用虚线框代表整个网页

!DOCTYPE

initial-scale1.0titleDocument/titlestyle*

{margin:

document.getElementById(box);var

oInfo

document.getElementById(info);oBox.onmousemove

function

/html上述代码中如果页面为往下滚动那么clientX/Y和pageX/Y的值会是一模一样的很好理解因为网页正处于最上方和浏览器的坐标系是重叠的。

当页面往下滚动后两者才会出现差异。

需要注意的是DOM中规定offsetX和offsetY是鼠标所在之处的最内部盒子的坐标比如下面的代码中虽然我们设置的是大盒子的事件监听但当鼠标放到小盒子中时offsetX和offsetY显示是以小盒子为基准的坐标

事件对象中鼠标滚轮事件onmousewheel也有属性——deltaY表示鼠标滚轮滚动方向向下滚动时返回正值向上滚动时返回负值

示例代码

idbox/divscriptdocument.onmousewheel

function

{console.log(e.deltaY);}/script

e.charCode属性

通常用于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

document.getElementById(field1);var

oInfo1

document.getElementById(info1);var

oField2

document.getElementById(field2);var

oInfo2

document.getElementById(info2);oField1.onkeypress

function

/body学到这里我们可能还是不知道这个字符码和键码在实际工作中有什么用接下来就来写一个有意思的小案例来实际应用一下这两个属性。

!DOCTYPE

initial-scale1.0titleDocument/titlestyle*

{margin:

document.getElementById(box);//定义两个全局变量分别表示盒子top属性和left属性var

200;var

200;//document对象的键盘按下事件监听即对用户在整个网页上按下按键时进行事件监听document.onkeydown

function