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

作者 新城 日期 2017-11-16
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同样使用事件代理得方式进行事件得批量绑定