移动端事件及事件应用

末蓝、 2022-06-04 00:57 217阅读 0赞

1.移动端事件基础  
2.移动端常用的事件库  
3.移动端轮播图css样式和响应  
4.移动端轮播图图片延迟加载

<table> 
 <tbody> 
  <tr> 
   <td><b>1.移动端事件基础</b></td> 
  </tr> 
 </tbody> 
</table>

### PC端常用事件 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">事件名</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">click</td> 
   <td align="left">当鼠标点击时触发</td> 
  </tr> 
  <tr> 
   <td align="left">mouseover</td> 
   <td align="left">当鼠标指针移动到元素上时触发</td> 
  </tr> 
  <tr> 
   <td align="left">mouseout</td> 
   <td align="left">当鼠标指针移出元素时触发</td> 
  </tr> 
  <tr> 
   <td align="left">mouseenter</td> 
   <td align="left">当鼠标指针移动到元素上时触发（不支持冒泡）</td> 
  </tr> 
  <tr> 
   <td align="left">mouseleave</td> 
   <td align="left">当鼠标指针移出元素上时触发（不支持冒泡）</td> 
  </tr> 
  <tr> 
   <td align="left">mousemove</td> 
   <td align="left">当鼠标指针移动到元素上时触发</td> 
  </tr> 
  <tr> 
   <td align="left">mousedown</td> 
   <td align="left">当元素上按下鼠标按钮时触发</td> 
  </tr> 
  <tr> 
   <td align="left">mouseup</td> 
   <td align="left">当在元素上释放鼠标按钮时触发</td> 
  </tr> 
  <tr> 
   <td align="left">mousewheel</td> 
   <td align="left">当鼠标滚轮正在被滚动时运行的脚本</td> 
  </tr> 
  <tr> 
   <td align="left">keydown</td> 
   <td align="left">在用户按下按键时触发</td> 
  </tr> 
  <tr> 
   <td align="left">keyup</td> 
   <td align="left">当用户释放按键时触发</td> 
  </tr> 
  <tr> 
   <td align="left">load</td> 
   <td align="left">页面结束加载之后触发</td> 
  </tr> 
  <tr> 
   <td align="left">scroll</td> 
   <td align="left">当元素滚动条被滚动时运行的脚本</td> 
  </tr> 
  <tr> 
   <td align="left">blur</td> 
   <td align="left">元素失去焦点时运行的脚本</td> 
  </tr> 
  <tr> 
   <td align="left">focus</td> 
   <td align="left">当元素获得焦点时运行的脚本</td> 
  </tr> 
  <tr> 
   <td align="left">change</td> 
   <td align="left">在元素值被改变时运行的脚本</td> 
  </tr> 
 </tbody> 
</table>

### 移动端常用事件 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">事件名</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">click</td> 
   <td align="left">当点击时触发（单击）</td> 
  </tr> 
  <tr> 
   <td align="left">load</td> 
   <td align="left">页面结束加载之后触发</td> 
  </tr> 
  <tr> 
   <td align="left">scroll</td> 
   <td align="left">当元素滚动条被滚动时运行的脚本</td> 
  </tr> 
  <tr> 
   <td align="left">blur</td> 
   <td align="left">元素失去焦点时运行的脚本</td> 
  </tr> 
  <tr> 
   <td align="left">focus</td> 
   <td align="left">当元素获得焦点时运行的脚本</td> 
  </tr> 
  <tr> 
   <td align="left">change</td> 
   <td align="left">在元素值被改变时运行的脚本</td> 
  </tr> 
  <tr> 
   <td align="left">input</td> 
   <td align="left">代替keyup、keydown</td> 
  </tr> 
  <tr> 
   <td align="left">touch事件模型</td> 
   <td align="left">处理单手指操作</td> 
  </tr> 
  <tr> 
   <td align="left">gesture事件模型</td> 
   <td align="left">处理多手指操作</td> 
  </tr> 
 </tbody> 
</table>

### touch事件模型 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">事件名</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">touchstart</td> 
   <td align="left">手指按到屏幕上</td> 
  </tr> 
  <tr> 
   <td align="left">touchmove</td> 
   <td align="left">手指在屏幕上滑动</td> 
  </tr> 
  <tr> 
   <td align="left">touchend</td> 
   <td align="left">手指离开屏幕</td> 
  </tr> 
  <tr> 
   <td align="left">touchcancle</td> 
   <td align="left">特殊情况下关闭/退出时触发</td> 
  </tr> 
 </tbody> 
</table>

### gesture事件模型 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">事件名</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">gesturestart</td> 
   <td align="left">当鼠标点击时触发</td> 
  </tr> 
  <tr> 
   <td align="left">gesturechange</td> 
   <td align="left">当鼠标点击时触发</td> 
  </tr> 
  <tr> 
   <td align="left">gestureend</td> 
   <td align="left">当鼠标点击时触发</td> 
  </tr> 
 </tbody> 
</table>

### touch事件的属性： ###

<table> 
 <thead> 
  <tr> 
   <th align="left">属性名</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">type</td> 
   <td align="left">事件类型</td> 
  </tr> 
  <tr> 
   <td align="left">target</td> 
   <td align="left">事件源</td> 
  </tr> 
  <tr> 
   <td align="left">preventDefault（returnValue）</td> 
   <td align="left">阻止默认行为</td> 
  </tr> 
  <tr> 
   <td align="left">stopPropagation（cancleBubble）</td> 
   <td align="left">停止事件的传播</td> 
  </tr> 
  <tr> 
   <td align="left">touches[0].clientX</td> 
   <td align="left">触碰位置的x值</td> 
  </tr> 
  <tr> 
   <td align="left">changedTouches</td> 
   <td align="left">当前的值和离开的值</td> 
  </tr> 
 </tbody> 
</table>

changedTouches和touches都是手指信息的集合（TouchList），touches获取到值的必备条件是只有手指还在屏幕上才可以获取，所以在touchend事件中如果想获取离开的瞬间坐标只能用changedTouches获取

### click ###

在移动端属于单击事件，不是点击事件， 在移动端的项目中经常会区分单击做什么和双击做什么，所以移动端的浏览器在识别click的时候，只有确定是单击后才会把它执行。在移动端使用click会存在300ms的延迟，浏览器在第一次点击结束后还需要等待300ms，看是否触发了第二次点击，如果触发了第二次，就不属于click了，没有触发第二次才属于click。

例如：点击方块，旋转一周：  
效果图：  
![这里写图片描述][SouthEast]

使用click：

使用touch：  
发生滑动，变成红色；点击旋转：

使用fastclick插件（解决移动端使用click导致的300ms延迟的问题）：

### 点击、单击、双击、长按、滑动 ###

单击和双击（300ms）  
点击和长按（750ms）  
点击和滑动（x或y偏移的距离是否在30px以内，超过30px是滑动）  
左右滑动和上下滑动（x轴偏移的距离>y轴偏移的距离=左右滑，相反就是上下滑）  
左滑和右滑（偏移的距离>0=右滑，相反左滑）

<table> 
 <tbody> 
  <tr> 
   <td><b>2.移动端常用的事件库</b></td> 
  </tr> 
 </tbody> 
</table>

FastClick.js：解决click事件的300ms的延迟  
Touch.js：百度云手势事件库 [https://github.com/Clouda-team/touch.code.baidu.com][https_github.com_Clouda-team_touch.code.baidu.com]  
hammer.js：同上  
Zepto.js：被誉为移动端的小型jQuery。  
[https://github.com/ZhaoJingnian/zepto][https_github.com_ZhaoJingnian_zepto]  
jQuery由于是在pc端使用的，所以代码中包含大量的对于IE的兼容处理，而Zepto只应用于移动端开发，所以在jQuery的基础上没有对低版本的IE进行支持。  
jQuery提供了很多的选择器类型及DOM的操作方法，但是Zepto中只是实现了部分常用的选择器和方法，例如：jQuery中的动画方法有animate、hide、show、toggle、fadeIn、fadeOut、fadeToggle、slideDown、slideUp、slideToggle….但是Zepto中只有，所以Zepto的代码大小比jQuery小很多。  
Zepto专门为移动端开发而诞生，所以相对于jQuery来说更适合移动端：Zepto的animate动画方法支持了css3动画的操作，Zepto专门的准备了移动端常用的事件操作。  
tap：点击、singleTap：点击、doubleTap：双击、longTap：长按、swipe：滑动、swipeUp：上滑、swipeDown：下滑、swipeLeft：左滑、swipeRight：下滑

<table> 
 <tbody> 
  <tr> 
   <td><b>3.移动端轮播图css样式和响应</b></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><b>4.移动端轮播图图片延迟加载</b></td> 
  </tr> 
 </tbody> 
</table>

[SouthEast]: /images/20220604/d8abc3edc2854384844dbdb23fb91394.png
[https_github.com_Clouda-team_touch.code.baidu.com]: https://github.com/Clouda-team/touch.code.baidu.com
[https_github.com_ZhaoJingnian_zepto]: https://github.com/ZhaoJingnian/zepto