25. PC端常用事件

PC端的部分事件在移动端中同样适用

目录

1 窗口加载事件 onload

2  调整窗口大小事件 onresize

3  窗口主要内容加载完成事件 DOMContentLoaded

4  窗口显示事件 pageshow

 5  常用鼠标事件

5.1  禁止鼠标右键菜单

5.2  禁用选中

5.3  mouseenter与mouseover的区别

6  鼠标事件对象

6.1  获取鼠标在可视区域中的坐标

6.2  获取鼠标在文档页面的坐标

6.3  获取鼠标在当前屏幕的坐标

6.4  一张跟随鼠标的图像

7  常用键盘事件

7.1  onkeyup

7.2  onkeydown

7.3  onkeypress

7.4  按下s键聚焦到输入框

7.5  在输入框内输入的文字在另一个盒子中变大

8  滚动事件 onscroll

9  过渡事件 transition

9.1  过渡开始时触发 transitionstart

9.2  过渡中触发 transitionrun

9.3  过渡结束时触发 transitionend

9.4  过渡取消时触发 transitioncancel

---

1 窗口加载事件 onload

在不考虑缓存的情况下，刷新，访问(包括a标签访问)，前进后退，都可以触发onload事件

• 火狐浏览器中，通过a地址访问b地址，再后退回a地址，火狐浏览器会将a地址的内容放在缓存中，也就是说在后退的时候，不会触发onload事件

与之前介绍的文档加载事件类似，之前我们找窗口中的元素，必须写在创建元素的下面

我现在想把script放到上面去，那么我就要用到窗口加载事件onload

当文档内容(html,css,JS)完全加载完成后会触发窗口加载事件(文档加载事件把html加载后就会触发，也就是说文档加载事件比窗口加载事件的执行顺序靠前)

我们现在把script挪到上面去

发现可以生效

window.onload是传统注册方式，如果想注册多个，那么你要使用window.addEventListener('load',function(){})

2  调整窗口大小事件 onresize

在调整窗口大小时会触发该事件

当我们调整窗口大小时会触发多次函数

• 打开页面后直接按F12也会触发该事件，因为多了一点儿东西也会让浏览器大小改变
• 打开页面后按下F12再刷新一遍就不会触发该事件了

一般配合屏幕尺寸来搞，比如把屏幕尺寸拖到一定大小，我就让背景变色

• 我们通过window.innerWidth来获取当前浏览器宽度，window.innerHeight可以获取当前浏览器高度

打开后是白色的

随便拖动一下变为青色的，因为此时宽度小于900

当拖动到大于900时变为红色的

3  窗口主要内容加载完成事件 DOMContentLoaded

• I9以上支持

当DOM内容(不包含样式表，图片，flash等)加载完成时，会触发onDOMContentLoaded事件，在页面完全加载完后，会触发onload事件

我们简单用一下

4  窗口显示事件 pageshow

onpagesshow会在load事件后触发，如果要访问的页面在缓存中，那么在访问的过程中就无法触发load与DOMContentLoaded事件，只会触发pageshow事件

我们简单用一下

• 这个事件给document添加无效

pageshow中有一个属性是persisted，可以判断页面是否来自缓存，如果不是就是false，是就是true，我们可以通过判断这个属性完成一些操作

无论网页是不是来自缓存，都会执行pageshow事件

 5  常用鼠标事件

常用的鼠标事件是下面这些

下面我再说几个常用的

5.1  禁止鼠标右键菜单

contextmenu在出现上下文菜单时会触发(比如右键网页)，我们使用e.preventDefault()让其失去本身的效果，这样用户就不能右键网页得到菜单

这样用户再对当前网页点右键就没有用了

5.2  禁用选中

当用户选中一些东西时会触发selectstart，我们通过e.preventDefault()让其失去本身的功能，那么用户则无法在页面中进行选中

无论是ctrl+a或者是用鼠标都无法选中这一段文字

通过禁用选中可以达到禁用复制的效果，因为选不中自然也就不能复制了

• 当然用户可以用F12进行复制，那么你可以再把F12禁用掉。那么如果用户访问你网页的时候选择禁用JS，那么你可以用JS从后端读取数据而不是写死，这样禁用JS后也无法看到相应的内容，还是不能复制

5.3  mouseenter与mouseover的区别

mouserenter与mouseover事件都会在鼠标经过元素时触发事件

区别是 如果有父子两个元素

- 对父元素设置mouseenter事件，只会在经过父元素时触发事件
- 对父元素设置mouseover事件，在经过父元素时会触发事件，在父盒子中经过子元素时也会触发事件
专业一点儿来讲就是 mouserover事件会冒泡，mouseenter事件不会冒泡

• mouseenter常搭配mouserleave一同使用，因为它们都不会冒泡

我们现在对父盒子设置mouseenter事件

打开后从青色区域沿着箭头移动到红色区域

发现只在刚进入青色盒子时触发了一次

现在我们给父盒子设置mouseover事件

打开后依然沿着箭头方向从外部进入青盒子再进入红盒子

我们发现移动到青盒子上触发了一次，移动到红盒子上又触发一次

如果你两次都是从外部进入，那么mouserenter与mouseover没有区别

6  鼠标事件对象

6.1  获取鼠标在可视区域中的坐标

用e.clientX获取x坐标，用e.clientY获取Y坐标，两个坐标的单位都是px（像素）

由于我的页面设置的很大，所以页面的可以区域是可以拖动的，但无论怎么拖动，这个红点儿对于文档的位置是不变的

我现在把红点儿放在这个位置上点击一次

再移动到这个位置点击一次

发现它们的结果是不一样的，这是因为可视区域变了，可视区域原点变了导致坐标发生改变

e.clientX与e.clientY是你当前可视区域的左上角点

6.2  获取鼠标在文档页面的坐标

用e.pageX获取横坐标，e.pageY获取纵坐标

• IE9以上支持e.pageX与e.pageY

这种方式只要每次点的点一样，那么坐标是相同的

6.3  获取鼠标在当前屏幕的坐标

用e.screenX获取x坐标，e.screenY获取y坐标

这个基本用不上，我用的双屏，所以获取时可以会出负值，如果是单屏幕的话，屏幕的左上角点为原点

6.4  一张跟随鼠标的图像

我当前图像的大小为50x50，减25的原因是让图像中心与鼠标移动的点一致

像这种放大图浅黄色的框子，原理是与上面的例子一致的

7  常用键盘事件

• onkeydown与onkeypress的主要区别是onkeypress不识别功能键，还有就是onkeypress的keyCode区分大小写
• 如果按下一个键同时可以触发onkeydown与onkeypress，会先执行onkeydown，之后执行onkeypress（执行顺序与书写顺序无关）
• onkeydown与onkeypress的keyCode不区分大小写

7.1  onkeyup

现在这样写就是松开键盘的任意键都会触发keyup

打开页面后我按了一下F12，触发了事件函数test

在键盘事件中有一个属性叫key，这个按键会显示你松开了哪一个键

key的兼容性问题比较大，一般会用keyCode进行判断，keyCode是按下指定键的ASCII码值，注意是键盘对应的ASCII码，与下面这个ASCII码表是不完全相同的

每次你要监听什么按键，你把事件打印出来看一下，这样你就知道是什么值了

所以如果要监听指定键，那么你可以这样写

打开界面后我在小写状态下松开q键

如果在大写状态下松开q键是不会执行事件函数的

7.2  onkeydown

与onkeyup用法相同，key同样区分大小写

按下状态会一直触发，弹起的时候只触发一次，因为只能弹起来一次

7.3  onkeypress

打开页面后我按一下F12，发现没有执行事件函数

之后我再按一下1，发现执行了事件函数

7.4  按下s键聚焦到输入框

• JS中的focus()方法是之前没介绍过的，执行后会将焦点给指定元素

打开后

按一下s，由于这里用的是onkeyup的keyCode，所以在大写小写状态都无所谓

7.5  在输入框内输入的文字在另一个盒子中变大

效果是这样的

CSS

HTML

JS

思路是每次对input进行键盘操作，都会获取一次input内的值，然后把值给盒子

• blur是失去焦点事件
• focus是得到焦点事件

即使是用鼠标将光标移动到别的地方也不影响使用，因为每次输入或删除都会重新读一遍input的内容

当不输入内容时，上面的大盒子会消失

失去焦点时大盒子会消失

这个案例如果使用onkeydown或onkeypress，大盒子会显示你上一步的结果，因为当按下按键的时候，文字还没有落入文本框中

• 获取input的内容除了用上面的方法，也可以利用事件对象 e.target.value 获取

8  滚动事件 onscroll

当元素的滚动条发生滚动时，会触发滚动事件onscroll

打开页面后如果滚动条在其实位置不会触发滚动事件

滚动时会触发

此时刷新页面会触发一次滚动事件

9  过渡事件 transition

想了解过渡属性可以看一下这个 24.过渡属性_Suyuoa的博客-CSDN博客

9.1  过渡开始时触发 transitionstart

当过渡开始的一瞬间触发该事件

9.2  过渡中触发 transitionrun

如果不加入过渡延时的话，transitionstart与transitionrun的触发条件一致

且在过渡过程中只会触发一次

现在我们加入延时过渡

在我点击div的瞬间会立即触发transitionrun，等待延时事件过后，会触发transitionstart

9.3  过渡结束时触发 transitionend

到达位置的一瞬间触发transitionend

9.4  过渡取消时触发 transitioncancel

在我把鼠标抽出去的时候会触发transitioncancel事件

当完全变红后再离开则不会触发该事件

在完全变红后，鼠标离开，盒子会逐渐变回青色，这个时候鼠标再次进入会触发该事件

因为它由红变青的过程中被打断了，鼠标再次进入使盒子从当前颜色再变到红颜色