js触摸事件以及js批量绑定事件

触摸事件

• touchatart

  当手指放在手机屏幕上的时候触发

• touchmove

  当手指在屏幕上移动的时候 持续触发

• touchend 当手指从屏幕上离开时触发

• ouchcancel（基本不用）

  当系统停止跟踪时触发，系统什么时候取消，文档没有明确的说明。
  event.preventDefault()，来阻止屏幕的默认滚动。

出去常用的DOM属性 三个常用触摸属性

 **touches 表示当前跟踪得触摸操作touch对象数组**
 当一个手指在触屏上时，event.touches.length=1,
 当两个手指在触屏上时，event.touches.length=2,

**targetTouches：特定于事件目标的touch对象数组。**
因为touch事件是会冒泡的，所以利用这个属性指出目标对象。
**changedTouches：表示自上次触摸以来发生了什么改变的touch对象的数组。**
每个touch对象都包含下列几个属性：

clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触摸的DOM节点目标。

手势事件

gesturestart：当一个手指已经按在屏幕上，而另一个手指又触摸在屏幕时触发。
gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发。
gestureend：当任何一个手指从屏幕上面移开时触发。
【注意】只有两个手指都触摸到事件的接收容器时才触发这些手势事件。

触摸事件与手势事件之间的关系
1、当一个手指放在屏幕上时，会触发touchstart事件，如果另一个手指又放在了屏幕上，则会触发gesturestart事件，随后触发基于该手指的touchstart事件。
2、如果一个或两个手指在屏幕上滑动，将会触发gesturechange事件，但只要有一个手指移开，则会触发gestureend事件，紧接着又会触发toucheend事件。

手势得专有属性
rotation：表示手指变化引起的旋转角度，负值表示逆时针，正值表示顺时针，从零开始。
scale：表示两个手指之间的距离情况，向内收缩会缩短距离，这个值从1开始，并随距离拉大而增长。

js批量绑定事件

使用事件代理的方式进行批量事件得绑定

1
2
3
4
5
6
7
8
9
10
11
12

//   假象container 里有两个按钮 btn1 和 btn2

 var container = documnet.getElementByID('container');
 container.addEventListener('click',function(e){
  // 获取事件触发对象
      var target = e.target;
       if(target.id == 'btn1'){
          alert('btn1');
       }else if(target.id == 'btn2'){
          alert('btn2');
       }
   });

JQ同样使用事件代理得方式进行事件得批量绑定

• ← 上一篇
• 下一篇 →