携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第2天juejin.cn/post/712312…
H5新增事件
| 属性 | 值 | 描述 |
|---|---|---|
| onberforeunload | Script | 即将离开当前页面(书信或关闭)时触发 |
| onpagehide | Script | 用户浏览网页时触发 |
| onpageshow | Script | 当窗口成为可见时运行的脚本 |
| onafterprint | Script | 文档打印之后运行的脚本 |
| onberforeprint | Script | 文档打印之前运行的脚本 |
| onerror | Script | 在错误发生时运行的脚本 |
| onhaschange | Script | 在文档已改变时运行的脚本 |
| Onmessage | Script | 在消息被触发时运行的脚本 |
| onoffline | Script | 当文档离线时运行的脚本 |
| ononline | Script | 当文档上线运行时的脚本 |
| onpostate | Script | 当窗口历史记录改变时运行的脚本 |
| onresize | Script | 当问当执行窗口被调整大小时触发 |
| onstorage | Script | 在web Storage区域更新后运行的脚本 |
| onundo | Script | 在文档执行undo时运行的脚本 |
1. H5新增表单事件*
Onformchange 目前所有浏览器都不支持,还没有真正执行(只要表单里的任何一个表单项改变,就会触发)
Onforminput 目前所有浏览器都不支持,还没有真正执行(只要表单里的任何一个表单项改变,就会触发)
oninput 表单内容被修改时触发
oninvalid 当元素无效时运行的脚本(得是表单带有自动验证的表单项email/tel/没有通过时,就会触发该事件)
Touch事件
touchstart 触摸开始时触发
touchmove 手指在屏幕上滑动的时候触发
touchend 触摸结束时触发
touchcancel 被打断时触发的事件,比如玩着手机来电话了
touch事件使用事件监听方式来绑定事件addEventListenter(“touch事件”,function(){ })
**onclick和touchstart事件的区别 **
onclick触发的事件要比touchstart事件晚,大概晚300毫秒
事件对象和pc端事件对象的区别
每个触摸事件都包含三个触摸列表,每个列表里包含了对应的一系列触摸点。
touches 当前屏幕的所有手指的一个列表
targettouches当前dom元素上的手指的一个列表
changedTouches涉及当前事件的手指的一个列表
触摸列表都是数组对象
每个touch对象包含的属性
identifier一个数值,表示触摸会话中当前手指的id
clientX触摸目标在当前窗口x坐标
clientY触摸目标在当前窗口Y坐标
screenX触摸目标在屏幕的X坐标
screenY触摸目标在屏幕的Y坐标
pageX触摸目标在页面中的X坐标
pageY触摸目标在当前页的Y坐标
target触摸的DOM节点目标
手势事件(手机其实是不支持这三个时间的,所以别用)
gestyresstart:当一个手指已经按在屏幕上了,而另一个手指又触摸在屏幕上时触发
gesturechange当触摸屏幕的任何一个手指的位置发生变化是触发
gestured
手势事件插件